template部分:
<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部分:
(真的主要是官方文档里面那个第二第三行选中的状态,反选将二三行那个直接变成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();
}
},
监听事件:
watch: {
// 监听表格多选事件
tableData: {
handler(value) {
if (this.checkAll) {
this.tableData.forEach(row => {
if (row) {
this.$refs.multipleTable.toggleAllSelection(row, true)
}
})
}
},
deep: true
}
},