美文网首页
element ui 中table翻页记忆上页勾选

element ui 中table翻页记忆上页勾选

作者: alive02 | 来源:发表于2018-07-26 18:36 被阅读0次

在使用table时很多时候需要分页,每次从后台请求一定条数的数据,但是,有的业务中需要用到勾选。是不是会遇到勾选过第一页以后,翻页到第二页的时候,第一页的勾选被取消了呢。下面代码可实现记忆勾选的功能(默认勾选的暂时有bug)

        this.change(this.mobileDatas)    //这个方法是在点击分页请求数据的时候调用,this.mobileDatas 这个是点击分页请求到的数据
      //change是可以实现翻页后再去上一页,上一页的会有已经有的勾选状态
           change(data){
                for(let i = 0;i<data.length;i++){
                    for(let x = 0;x<this.multipleSelectionAll.length;x++){     
                    if(data[i].id == this.multipleSelectionAll[x].id ){
                        var c = i
                        var f = function(a){
                            setTimeout(() => {
                                vm.$refs.multipleTable.toggleRowSelection(data[a],true);
                            }, 1*a);
                        }
                        f(c)
                    }
                }
                }
                
            },
  在table的@selection-change="handleSelectionChange"中
             handleSelectionChange(val) {
                this.multipleSelection = val
                this.changePageCoreRecordData (this.multipleSelection)
           },
           changePageCoreRecordData (x) {
                // 总选择里面的key集合
                let selectAllIds = [];
                this.multipleSelectionAll.forEach((row,index)=>{
                    selectAllIds.push(row.id);
                })
                let selectIds = []
                // 获取当前页选中的id
                x.forEach((row,index)=>{
                    selectIds.push(row.id);
                    // 如果总选择里面不包含当前页选中的数据,那么就加入到总选择集合里
                    if (selectAllIds.indexOf(row.id) < 0) {
                        this.multipleSelectionAll.push(row);
                    }else{
                        for(let i = 0; i< x.length; i ++) {
                            if (this.multipleSelectionAll[i].id == row.id) {
                                // 如果总选择中有未被选中的,那么就删除这条
                                this.multipleSelectionAll.splice(i, 1,x[i]);
                                break;
                            }
                        }
                    }
                })
                let noSelectIds = [];
                // 得到当前页没有选中的id
                x.forEach(row=>{
                    if (selectIds.indexOf(row.id) < 0) {
                        noSelectIds.push(row.id);
                    }
                })
                noSelectIds.forEach(id=>{
                    if (selectAllIds.indexOf(id) >= 0) {
                        for(let i = 0; i< this.multipleSelectionAll.length; i ++) {
                            if (this.multipleSelectionAll[i].id == id) {
                                // 如果总选择中有未被选中的,那么就删除这条
                                this.multipleSelectionAll.splice(i, 1);
                                break;
                            }
                        }
                    }
                })
                console.log(this.multipleSelectionAll)
            },

分页的方法里要执行以下上面方法,可以实现翻页记忆

  handleCurrentChange(val) {
                this.page = val
                this. handleChange()
                this.changePageCoreRecordData (this.multipleSelection)
            },

相关文章

网友评论

      本文标题:element ui 中table翻页记忆上页勾选

      本文链接:https://www.haomeiwen.com/subject/frfimftx.html