1 data
checkAll: false,
selectedRowIds: [],
isIndeterminate: false,
2 methods
changeSelectedRow(flag, id) {
flag
? this.selectedRowIds.push(id)
: this.selectedRowIds.splice(
this.selectedRowIds.findIndex(item => item === id),
1
);
const checkedCount = this.selectedRowIds.length;
this.checkAll = checkedCount === this.tableData.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
},
changeAll(val) {
this.checkAll = val;
this.selectedRowIds = val ? this.tableData.map(item => item.recId) : [];
this.isIndeterminate = false;
}
1. 列头+列身
{
prop: "checkbox",
width: 50,
minWidth: 50,
maxWidth: 50,
render: (h, { row }) => {
return (
<el-checkbox
value={this.selectedRowIds.includes(row.recId)}
onChange={val => {
this.changeSelectedRow(val, row.recId);
}}
></el-checkbox>
);
},
renderHeader: () => {
return (
<el-checkbox
indeterminate={this.isIndeterminate}
value={this.checkAll}
onChange={val => {
this.changeAll(val);
}}
></el-checkbox>
);
}
}