vue实现全选和反选

vue实现全选和反选_第1张图片

1.全选用两种方式实现
(1).计算属性方式
父复选款代码:
在这里插入图片描述
vue实现全选和反选_第2张图片
过滤出来所有子复选款的数组 isChecked 为true的项,如果为true选中的长度等于数组长度,返回true,让父复选款为true,否则为false

(2)方式二
在data里面加一个属性allChecked:false
在这里插入图片描述

这时绑定checked=“allChecked”就是:
在这里插入图片描述
在click方法里面
vue实现全选和反选_第3张图片
2.反选
因为后端传输的数据没有给到isChecked这个属性,所以得自己先加一个啦
在查询到页面所有数据时增加,代码如下:
vue实现全选和反选_第4张图片
实现的效果(这个字段就是我加的):
vue实现全选和反选_第5张图片
这个是子复选款代码:
在这里插入图片描述

还有子复选款的click方法(记得传递当前项的id):
vue实现全选和反选_第6张图片
好啦,ok完成了
感觉方法很麻烦,后续改进。

你可能感兴趣的:(vue.js)