vue Element Plus Cascader级联选择器点击标签选中复选框

4 篇文章 0 订阅
文章介绍了如何在Element-Plus的Cascader组件中,通过修改mounted生命周期函数,使用定时器和原生JavaScript实现点击标签时自动选中相应的复选框功能。
摘要由CSDN通过智能技术生成

element-plus原功能

element-plus的Cascader级联选择器点击标签时是不会选中复选框的,我们想要实现点击标签时也能选中复选框这个效果,那么就要用到一些原生的方法

实现效果

  mounted() {
    // Cascader 级联选择器: 点击文本就让它自动点击前面的input就可以触发选择。
    setInterval(function() {
      document.querySelectorAll('.el-cascader-node__label').forEach(el => {
        el.onclick = function() {
          if (this.previousElementSibling) this.previousElementSibling.click();
        };
      });
    }, 1000);
},

  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值