template section:
<el-button
icon="el-icon-check"
round
:indeterminate="isIndeterminate"
v-model="checkAll"
@click="selAll()">全选
</el-button>
<el-button
icon="el-icon-finished"
round
@click="unselAll(tableData)">反选
</el-button>
script section:
(really mostly official documents which the second and third line of the selected state, anti-election that will twenty-three line directly into tableData [] OK.)
selAll() {
if (this.$refs.multipleTable.selection.length < this.tableData.length) {
this.checkAll = true;
} else {
this.checkAll = false;
}
this.$refs.multipleTable.toggleAllSelection();
},
//表格内checkbox触发的全选按钮状态变化
selRow(val) {
if (val.length < this.tableData.length && val.length > 0) {
this.isIndeterminate = true;
} else if (val.length === this.tableData.length) {
this.isIndeterminate = false;
this.checkAll = true;
} else if (val.length === 0) {
this.isIndeterminate = false;
this.checkAll = false;
}
},
unselAll(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
Monitor events:
watch: {
// 监听表格多选事件
tableData: {
handler(value) {
if (this.checkAll) {
this.tableData.forEach(row => {
if (row) {
this.$refs.multipleTable.toggleAllSelection(row, true)
}
})
}
},
deep: true
}
},