element文档关于全选和取消已经写的很详细,可以直接参考官方文档。
本文主要说一下反选,运用到该方法 toggleRowSelection 第一个参数为当前行,第二参数true或false表示选中状态
主要思路就是,我们已经拿到了当前选中的数据,给它自定义一个的属性,然后去所有数据里遍历循环,没有该属性的就设置选中状态,有该属性的就设置取消选中状态。我自己感觉写的比较复杂,但是很容易理解,大家有更好的方法,可以@我,我也学习学习。
//state.multipleSelection:已经选中的数据
//state.tableData:所有数据
//state.multipleSelection[i].yflag=true 自定义属性,原始数据里没有的属性
//该写法为vue3
//反选
const inverse = () =>{
for(let i = state.multipleSelection.length-1; i>=0; i--){
state.multipleSelection[i].yflag=true
}
state.multipleSelection.forEach(row=>{
proxy.$refs.multipleTable.toggleRowSelection(row,false)
})
state.tableData.forEach(row=>{
if(!row.yflag){
proxy.$refs.multipleTable.toggleRowSelection(row,true)
}
})
for(let j = state.tableData.length-1; j>=0; j--){
if(state.tableData[j].yflag){
delete state.tableData[j].yflag
}
}
}