element表格table实现反选

684 阅读1分钟

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
        }
      }
    }