element 饿了么 表格多选与反选

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

猜你喜欢

转载自blog.csdn.net/Beatingworldline/article/details/120946247