Element ui 中使用table组件实现分页记忆选中

Posted 2020-11-14 wanglu

我们再用vue和element-ui，或者其他的表格的时候，可能需要能记忆翻页勾选，那么实现以下几个方法就ok了

首先定义个data值

data () {
   return {
      multipleSelectionAll: [],   // 所有选中的数据包含跨页数据
　　  idKey: ‘personId‘ // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)
   }  

}

方法中定义以下：

methods : {
           // 设置选中的方法
           setSelectRow() {
                if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {
                    return;
                }
                // 标识当前行的唯一键的名称
                let idKey = this.idKey;
                let selectAllIds = [];
                let that = this;
                this.multipleSelectionAll.forEach(row=>{
                    selectAllIds.push(row[idKey]);
                })
                this.$refs.table.clearSelection();
                for(var i = 0; i < this.tableData.length; i++) {                    
                    if (selectAllIds.indexOf(this.tableData[i][idKey]) >= 0) {
                        // 设置选中，记住table组件需要使用ref="table"
                        this.$refs.table.toggleRowSelection(this.tableData[i], true);
                    }
                }
            } ,
            // 记忆选择核心方法
            changePageCoreRecordData () {
                // 标识当前行的唯一键的名称
                let idKey = this.idKey;
                let that = this;
                // 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算
                if (this.multipleSelectionAll.length <= 0) {
                    this.multipleSelectionAll = this.multipleSelection;
                    return;
                }
                // 总选择里面的key集合
                let selectAllIds = [];
                this.multipleSelectionAll.forEach(row=>{
                    selectAllIds.push(row[idKey]);
                })
                let selectIds = []
                // 获取当前页选中的id
                this.multipleSelection.forEach(row=>{
                    selectIds.push(row[idKey]);
                    // 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里
                    if (selectAllIds.indexOf(row[idKey]) < 0) {
                        that.multipleSelectionAll.push(row);
                    }
                })
                let noSelectIds = [];
                // 得到当前页没有选中的id
                this.tableData.forEach(row=>{
                    if (selectIds.indexOf(row[idKey]) < 0) {
                        noSelectIds.push(row[idKey]);
                    }
                })
                noSelectIds.forEach(id=>{
                    if (selectAllIds.indexOf(id) >= 0) {
                        for(let i = 0; i< that.multipleSelectionAll.length; i ++) {
                            if (that.multipleSelectionAll[i][idKey] == id) {
                                // 如果总选择中有未被选中的，那么就删除这条
                                that.multipleSelectionAll.splice(i, 1);
                                break;
                            }
                        }
                    }
                })
            },
            currentChange(val){
                // 改变页的时候调用一次
                this.changePageCoreRecordData();
                ......
            },
            sizeChange(val){
                // 改变每页显示条数的时候调用一次
                this.changePageCoreRecordData();
                ......
            }, 
            query () {
                  // 分页查询数据方法，在成功返回数据方法里调用setSelectRow方法，使每次分页查询都能勾选中
                $.ajax({...,
                    success:(res)=>{
                        ......
                        setTimeout(()=>{
                            this.setSelectRow();
                        }, 200)
                    }
                })
            }

}

如果你的是自定义组件dialog弹窗里面的表格选择，如果想每次打开想选中，那么就直接在props加一个值，然后加一个watch

props: [ "selectData"],
watch: {
    ‘selectData‘ (val) {
        this.multipleSelectionAll = val;
        }
    },