element Ele.me form multiple selection and inverse selection

element officially supports full selection but does not support inverse selection.
The official document
development requirements are: after multiple rows of data are selected by the user to process multiple rows of data at the same time, the user needs to invert the selection and perform another operation on all other data in the selected part of the current table. an operation.
In the actual development, I thought it was very simple, but because I was not familiar with the element form, I wasted a lot of time stepping on the pit.
Therefore, the results of this development are summarized as follows:


                <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);
                })
            }
        },
  }

Guess you like

Origin blog.csdn.net/Beatingworldline/article/details/120946247