vue element Cascader 级联选择器选择任意一级选项点击收起，点击label选中等问题详解

1. 温馨提示：Cascader 级联选择器选择任意一级请切换到 2.12.0 最新版

2. 直接步入主题，先看下需求要实现的功能
就是一个级联联动效果，但是他是每一级都能够选择，可以看到既可以选商品组，还能选择商品组下面的团队长，也就是他的子级。

找到饿了吗的级联选择器，快捷访问地址：然后找到选择任意一级选项

3. Cascader 级联选择器数据渲染
其实这个很简单，就是通过 :options="options" 映射就OK啦。让每一级都可以选择设置属性 :props="{ checkStrictly: true }"

上面的就是很简单的渲染，这里就不给大家看具体实现代码了，坑还在后面，这是我渲染的结果

4. 本文重点来了。。。
当我们都写完了的时候，but，特么这官网这个有两个问题：

点击圆圈后理想是自动收起下拉，但是他这个也没有
而且只能点击圆圈才能选中，点击文字 label 没有效果

好像很少人用这种，级联每一级都可以选择的。。。用得多的就是选中最后一级，像省级联动之内的

后面终于解决了这两个问题：
1.先看第一个问题，让他收起来，这个好像不难，确实不难：
设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可。（虽说简单，但是这个属性我找了半天，官网根本没有说~~~~(>_<)~~~~ ）

watch: {
    handlerValue() {
        if (this.$refs.refHandle) {
            this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
        }
    }
},

2.在看看第二个问题，点击label 也每次让他选中，卧槽，无从下手，后面怎么解决的说来话长，看实现代码吧。

mounted() {
　　//点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡，暂时想不到好方法来触发。
　　//这种比较耗性能，暂时想不到其他的，能实现效果了。
　　setInterval(function() {
　　　　document.querySelectorAll(".el-cascader-node__label").forEach(el => {
　　　　　　el.onclick = function() {
　　　　　　　　if (this.previousElementSibling) this.previousElementSibling.click();
　　　　　　};
　　　　});
　　}, 1000);
},

5. 补充其它问题
后端返回的字段和前端的不一致，请使用 props 把 value,label,children 做映射

:props="optionProps"

optionProps: {
        value: 'id',
        label: 'name',
        children: 'child',
        checkStrictly: true
    }

vue解决Element-ui中 el-cascader 级联选择器最后一级数据为空显示暂无数据问题
————————————————
版权声明：本文为CSDN博主「@必意玲」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36410795/article/details/100894520

vue element Cascader 级联选择器 选择任意一级选项 点击收起，点击label选中等问题详解

vue element Cascader 级联选择器选择任意一级选项点击收起，点击label选中等问题详解