element联动选择器，选择任意层级点击文字即选中及点击就收缩效果

最新推荐文章于 2024-10-29 09:11:30 发布

岁月如歌_

最新推荐文章于 2024-10-29 09:11:30 发布

阅读量1k

点赞数 1

分类专栏：前端 vue

本文链接：https://blog.youkuaiyun.com/namechenfl/article/details/112219994

版权

前端同时被 2 个专栏收录

33 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍如何使用 Vue.js 对级联选择器进行优化，包括实现点击文字即可选中及点击后的收缩效果。通过代码示例展示了如何在 mounted 生命周期钩子中设置定时器使元素可点击选中，以及如何利用 ref 属性来监听级联选择器的状态变化并实现在选择最后一级选项时自动关闭面板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

代码点击文字即选中

在mounted里加这句话

  mounted() {
      
          	  // 点击文字即选中
		this.timer =  setInterval(function() {
　　　　　　document.querySelectorAll(".el-cascader-node__label").forEach(el => {
　　　　　　　　el.onclick = function() {
　　　　　　　　　　if (this.previousElementSibling) this.previousElementSibling.click();
　　　　　　　　};
　　　　　　});
　　　　}, 1000);
    },

点击就收缩效果

标签上加ref

   <el-cascader
                            size='mini'
                            :options="goodsOptions"
                            v-model='goods_cid_list'
                            :props="{ checkStrictly: true,
                            value:'id',
                            label:'name',
                            children:'children'}"
                            clearable
                            @change='goodsOptionsChange'
                            ref="cascaderHandle" 
                            :show-all-levels="false" 
                            filterable></el-cascader>

	goodsOptionsChange(e){
			
			 this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
	// 监听是否为最后一级，如果为最后一级，面板收起
			var children = this.$refs.cascaderHandle.getCheckedNodes();
          if(children[0].children.length < 1){   //判断有没有下级
            this.$refs.cascaderHandle.dropDownVisible = false; //监听值发生变化就关闭它
		  }
			
        },