element官方是支持全选的 但不支持反选操作
官方文档
开发需求是:多条数据用户选中部分行进行多行数据的同时处理操作后,要反选,对当前表格已选中部分的其他所有数据进行另一种操作。
实际开发中本以为很简单,但还是因为不够熟悉element表格导致踩坑浪费了不少时间。
故将此次开发成果总结下来:
<el-table
:data="tableData"
ref="multipleTable"
tooltip-effect="dark"
@select-all="handleSelectionChange"
@selection-change="saveBeforeCheckd"
highlight-current-row
stripe
@row-click="rowClick">
<!-- 表格内容设置 -->
</el-table>
.................
....................
..............
methods: {
//beforeCheckd记录每次变化的选中情况,全选前选中情况即数组的倒数第二个 规避掉表格选中的实时变化
saveBeforeCheckd(val){
this.beforeCheckd.push(val);
},
// 相当于对全选操作做拦截 拿到全选前的选中行数据 进行反选
handleSelectionChange(val) {
// 操作选中行用的方法:toggleRowSelection()会重复调用selection-change 所以实现反选要写在select-all中 this.$refs.multipleTable.selection 获取表格当前选中行信息
let selection = [];
if(this.beforeCheckd){
selection = this.beforeCheckd[this.beforeCheckd.length-2];
}
debugger
if(selection&&selection.length<this.tableData.length){
// 已经有选中的 取消选中
selection.forEach(it=>{
this.$refs.multipleTable.toggleRowSelection(it,false);
})
let inverse = [];
// 过滤
this.tableData.forEach(itout=>{
let flag = selection.find(it=>{
return it.singleWordId===itout.singleWordId
})
if(!flag){
inverse.push(itout);
}
})
// 未选中的选中
inverse.forEach(it=>{
this.$refs.multipleTable.toggleRowSelection(it,true);
})
}
},
}