elementplus虚拟化选择器 elementui 选择器

element-ui 级联选择器 Cascader 选择任意一级选项去掉圆圈和点击label标签可选，选择完之后下拉框自动回收

解决方法：

1.

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

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.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ 　　　　　　　　this.refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
 　　　　　　}
 　　　　}
 　　}

最近一个需求在使用到Element UI Cascader级联选择器中的选择任意一级选项这个组件的时候，这个组件在最新2.13版本的时候前面多了一个圆圈，只有点击圆圈的时候才代表选中，点击文字不会被选中，而我的需求是需要点中文字则选中，经过爬坑总结出一个方法，简单的说就是改变前面圆圈的样式来进行实现的，现记录一下，上代码

.el-cascader-panel .el-radio {
 width: 100%;
 height: 100%;
 z-index: 10;
 position: absolute;
 top: 0px;
 right: 10px;
 }
 .el-cascader-node__label {
 width: 157px;
 }
 .el-cascader-panel .el-radio__input {
 visibility: hidden;
 }
 .el-cascader-panel .el-cascader-node__postfix {
 top: 10px;
 }
 如有不对的地方欢迎指正上述解决方法链接：
 
 https://zhuanlan.zhihu.com/p/151638286

注：我是将样式的修改放在全局样式中