大致思路：使用数组中元素控制表身复选框是否勾选，以及是否全选
具体思路：
1.先定义一个tableDatas数组，存放被选中的行，v-for渲染的行会根据数组中是否有当前行，来判断当前行的复选框是否勾选
2.点击全选时：把所有行放入tableDatas数组
3.点击全不选时：把tableDatas数组清空
4.点击某行复选框时：先在数组中查找当前行是否存在，如果存在就删掉（取消勾选），如果不存在就添加到数组中（进行勾选），接着判断数组的长度与数据的长度是否相等，相等的话激活全选框，不等的话取消勾选全选框
扩展：进行前端分页后实现全选单选全不选
currentPage代表当前所在页，pagesize代表每一页的数据量
这部分是进行前端分页后，单击全选框和单击列表复选框的代码
selectAll($event){
if($event.currentTarget.checked==true){
//点击全选
this.tableDatas=[];
for(let i = (this.currentPage-1)*this.pagesize; i < this.currentPage*this.pagesize; i++){
this.tableDatas.push(i);
}
}else if(($event.currentTarget.checked==false)){
//全不选
this.tableDatas=[];
}
this.thChecked = $event.currentTarget.checked;
},
select(index){
if(index > (this.currentPage-1)*this.pagesize-1 && index < this.currentPage*this.pagesize){
let a =this.tableDatas.indexOf(index);
if(a >= 0){
this.tableDatas.splice(a,1);
}else{
this.tableDatas.push(index);
}
if(this.currentPage == Math.ceil(this.tableData.length/this.pagesize)){
//当页数为最后一页时
if(this.tableDatas.length == this.tableData.length-(this.currentPage-1)*this.pagesize){
this.thChecked = true;
}else{
this.thChecked = false;
}
}else{
//当前页数非最后一页
if(this.tableDatas.length < this.pagesize){
this.thChecked = false;
}else if(this.tableDatas.length >= this.pagesize){
this.thChecked = true;
}
}
}else{
this.tableDatas=[];
}
},
这部分是没有前端分页的完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<!-- 表头 -->
<tr>
<th>日期</th>
<th>
<input type="checkbox" @click="selectAll($event)" v-model:checked="thChecked">
</th>
<th>地址</th>
</tr>
<!-- 表身 -->
<tr :key="index" v-for="(item, index) in tableData">
<td>{
{item.date}}</td>
<td>
<!-- 在tableDatas数组中查找index，indexOf查找到以后会返回index所在位置，如果tableDatas.indexOf(index)>=0就意味着这个复选框要被勾选 -->
<input type="checkbox" @click="select(index)" :checked="tableDatas.indexOf(index)>=0">
</td>
<td>{
{item.address}}</td>
</tr>
</table>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
tableDatas: [], //被选中的行
thChecked: false, //全选按钮默认为没选中
},
methods: {
selectAll($event) {
if ($event.currentTarget.checked == true) {
//全选先把数组清空，然后遍历数据，把所有行的index加入到数组中（也就是从0到tableData长度减一）
this.tableDatas = [];
for (let i = 0; i < this.tableData.length; i++) {
this.tableDatas.push(i);
}
} else if (($event.currentTarget.checked == false)) {
this.tableDatas = []; //全不选,则把数组清空
}
},
select(index) {
let a = this.tableDatas.indexOf(index); //a为当前点击行index在tableDatas中的位置
if (a >= 0) {
//存在的话，就从数组中删掉这个
this.tableDatas.splice(a, 1);
} else {
//不存在的话就加入到数组中
this.tableDatas.push(index);
}
//判断全选按钮是否勾选
if (this.tableDatas.length != this.tableData.length) {
//数组的长度不等于数据的长度，则全选按钮不勾选
this.thChecked = false;
} else {
//数组的长度等于数据的长度，全选按钮勾选
this.thChecked = true;
}
},
}
});
</script>
</html>