elementUI级联选择器可以选择任意一级选项

https://element.eleme.cn/#/zh-CN/component/cascader

这个是elementui官网级联选择器的地址，其中选择任意一级选项的项目是这样的

 

 

 这样的话效果是实现了，但是存在两个问题：

1、只能点击圆圈才能选中，点击文字 label 没有效果；

2、点击圆圈后理想是自动收起下拉，但这个是点击下拉框之外的地方才可以收起。

 

解决办法如下，但是原理不太清楚（很惭愧，先记录下吧）

1、点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡，暂时想不到好方法来触发。（这种比较耗性能，暂时想不到其他的，能实现效果了。）

　　mounted() {

　　　　setInterval(function() {
　　　　　　document.querySelectorAll(".el-cascader-node__label").forEach(el => {
　　　　　　　　el.onclick = function() {
　　　　　　　　　　if (this.previousElementSibling) this.previousElementSibling.click();
　　　　　　　　};
　　　　　　});
　　　　}, 1000);
　　},

2、设置每次监听值变化的时候，把 dropDownVisible 属性设置为 false 即可（在这解释下handlerValue和$refs.refHandle，handlerValue是v-model绑定的值，ref类似于获取这个元素，不止table里有ref，其他标签你都可以用ref，然后通过this.$refs.xxx来获取，这里ref='refHandle'）

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