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的长度 就改变多选按钮的样式