且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

vue.js 怎么实现表格的 allcheck

更新时间:2023-11-02 11:25:58

vue有一个神器能够实现 allcheck 这种功能,那就是 计算属性computed

大体思路是

1.给每个数据增加一个属性,selected
2.在 computed 里面增加一个 allSelected 的计算属性
3.定义该属性的 get & set
4.把allSelected 绑定到 thead 的 checkbox 上。
这样就可以实现

1.tbody 里面每行都选中,thead checkbox自动选中
2.thead checkbox选中状态下 tbody某一行不选择,thead 选中自动取消
3.thead checkbox点击选中,tbody所有行选中
4.thead checkbox点击取消选中 tbody所有行不选中
具体代码实现见
https://jsfiddle.net/muchen/7...