element 饿了么表格多选与反选

最新推荐文章于 2024-07-24 23:34:20 发布

原创最新推荐文章于 2024-07-24 23:34:20 发布 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #elementui

开发DEBUG记录专栏收录该内容

41 篇文章

订阅专栏

本文主要介绍了在使用Element UI开发时遇到的一个问题：如何在表格中实现反选功能。通过监听`select-all`和`selection-change`事件，结合`toggleRowSelection()`方法，成功实现了在用户部分选择数据后，进行反选操作，从而对未选中的数据进行处理。文章详细讲解了代码实现过程，并提供了关键代码片段，帮助开发者避免踩坑。

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