html手写vue多级选择框,【Vue】element ui Cascader 级联选择器 想支持多选怎么实现...

用的element ui的级联选择器 想实现可以支持多选 以tag的形式显示在栏里 如图

6541eaa4485ba5722cdd63764c5b612c.png

html代码

:options="options"

:show-all-levels="false"

v-model="selectedOptions"

@change="addOption"

>

在每次的change回调里 会得到一个[父级value,子集value] 我想只显示子集value 然后实现多选的效果

本来想的是在每次的change回调里 动态的给selectedOptions push进去当前的value ,selectedOptions格式为[[父级value,子集value],[父级value,子集value]],但是没有实现。不知道有没有人实现过

回答

自己写了个div 定位在级联选择器的位置

48ae03d9614cbfc8b816f2650875d56c.png

在级联选择器的回调里 清空它的selectedOptions 给为tag在data里定义的name里push进去 子集value

d0cdf412764599358bb28118630ef1ec.png

实现类似效果

961b5eac829debc852415db55d361f62.png

可以试一下这个:https://github.com/Charming20…

基于element-ui的级联多选选择器,友好显示下拉箭头,样式与element一致,支持多选与级联选择器的大部分功能。

有现成的

大哥,你这个也无法添加一些默认选中的选项呀,就是说我要给用户添加一个角色,但是原本已有角色必须在未选之前就显示在选中框里……

可以选中前两列,再选中第三列的时候,只获取第三列数据,选中前两列没选中第三列,获取第二列数据吗

前段时间业务需要所有手撸了一个,保留element-ui所有功能,并做了一些扩展

https://www.npmjs.com/package…

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值