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和 r e f s . r e f H a n d l e , h a n d l e r V a l u e 是 v − m o d e l 绑 定 的 值 , r e f 类 似 于 获 取 这 个 元 素 , 不 止 t a b l e 里 有 r e f , 其 他 标 签 你 都 可 以 用 r e f , 然 后 通 过 t h i s . refs.refHandle,handlerValue是v-model绑定的值,ref类似于获取这个元素,不止table里有ref,其他标签你都可以用ref,然后通过this. refs.refHandlehandlerValuevmodelreftablerefrefthis.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://www.cnblogs.com/web-cuicui/p/12629079.html
https://zhuanlan.zhihu.com/p/151638286

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值