elementUi Cascader 级联选择器如何选择任意一级,以及所遇到的问题

1.拿到需求要实现级联选择器并且可以选择任意一级。运用elementUi 的cascader 组件,这个组件默认情况下是严格遵守父子节点互相关联的。要实现可以选择任意一级,那就要给任意一级设置可选择属性。官网提供的:props="{ checkStrictly: true }"解除父子节点互相关联。
WX20200528-143914@2x.png

2.问题来了。。。
设计师不想要前面的单选按钮,并且直接点击lable即可选中效果。
(1)想办法把单选按钮拿掉,第一时间想到的办法就是css将其隐藏

.el-radio {
  color: #606266;
  cursor: pointer;
  visibility: hidden; // 加上这一行
  margin-right: 30px;
}

(2)怎么让点击文字也有选中效果呢,翻了官网没有提到。。去瞅源码吧
image.png
原来change事件是注册在radio上的
image.png
而redio后面的这个span并没有注册事件
那只要在span上手动注册组件去调用radio的事件就行了

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

到这里大功告成
效果。。。。
image.png

结果又遇到了另一个问题,果然坑真的多、、、、
理想状态下,是选中之后下拉马上收起,但是现有的组件不支持
网上找了很多办法说把 dropDownVisible 属性设置为 false 即可,我亲自尝试了很多次,根本无效,不知道那些大神们是怎么起到作用的

this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它

以上代码亲测无效。。。
暂时没找到这个问题的比较好的解决办法,为了收起下拉框,我在选中后加了一个二次确认框,完美的避开了这个问题,哈哈哈、、、

  • 17
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 14
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值