element的多级选中_elementUI级联选择器可以选择任意一级选项

这个是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; //监听值发生变化就关闭它

}

}

}


版权声明:本文为weixin_39712821原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。