vue中 element 单选多选功能的实现

 

单选html  

因为当前的选项数据是通过for循环遍历出来的  所以当前的每一个checkbox也是通过循环遍历得出

所以当双向绑定数据的时候就会遇到问题 

 

发起请求获取到当前选项的json数据

对数据进行map遍历 

添加新的属性 isSelected 并且为 false

(map为对数组进行遍历 并改变原数组)

对单选按钮双向绑定的时候就可以绑定到 当前item下的 isSelected 

 多选按钮 定义一个变量双向绑定到多选按钮 通过change事件获取到当前的点击状态

 

如果当前的多选按钮为true 就遍历当前list让所有的单选状态都为true 否则为false 

 

接下来对单选进行判断 

获取当单选按钮的状态 通过$event获取 并复制给当前的变量

通过filter进行过滤 (filter 为 返回当前符合条件的对象 原数组不变) 获取到当前的所有为true的单选按钮的变量

获取到所有的list的长度 如果 所有勾选的单选的长度 等于 list长度  就让多选为true

如果 单选的个数大于0 和 小于list的长度 就改变多选按钮的样式 

 

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值