Vue + Element UI 表格分页记忆选中，分页切换 页面打勾不丢失

方法一：

官方也有基于这种操作给出通过属性解决的方法：

<el-table :row-key="rowKey">
     <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>

methods: {
   rowKey (row) {
      return row.id
    }
}

首先官网中对参数的描述是这样的：

:row-key ：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

:reserve-selection :仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key），该属性默认值为false

知道这些了，同时你还需要toggleRowSelection和clearSelection两个属性。

toggleRowSelection：

参数：row, selected

用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

clearSelection：用于多选表格，清空用户的选择。

结合这四个属性可以实现基本的表格选中，分页打勾留存状态，但是对于一些非常规操作打勾却不是很适用。

 

我遇到的需求是这样的首先在页面表格中点击 加号（图一），数据表格的弹窗会打开（图二），在弹窗中勾选需要的数据可以分页去选择，然后点击确定将选中的数据塞回页面的表格中（图一），再次点击 加号 弹窗打开 页面表格中的数据打勾情况会回显在弹窗中（图二）。

 

方法二：

我选用的方法分别是表格的两个选中方法 select和select-all，toggleRowSelection方法，整体的逻辑

1.单选时，判断临时存储的数组是否为空，为空则直接push，不为空则判断页面中是否存在该数据，存在则剪切掉代表取消打勾，不存在则push进去。

2.全选时,判断参数val是否存在，存在即是代表全部选中，直接push到临时数组，然后进行数组去重即可，如果val为空，则是代表全取消，因为选中的是当前页面的数据，所以直接从临时数组中删掉当前分页页面的数据即可。

3.最后要做的就是在每次数据加载的时候 使用toggleRowSelection的方法，让弹窗中的数据回显

来上代码：

<el-table
        ref="multipleGoodsList"
        @select="handleSelect"
        @select-all="handleSelectAll"
      >
        <el-table-column type="selection"></el-table-column>
</el-table>
export default {
  data() {
    return {
         goodsList: [], //弹窗中每次请求的页面数据
         selectedGoodsList:[]//临时选中的数组   
         selectedGoods:[] //页面中的表格    
        
    }
  },
    methods: {
    //获取弹窗内的数据
         getGoodsListFun() {
              ...
              // 拿到数据后
            // 当再次打开
            this.$nextTick(() => {
              if (this.selectedGoodsList.length && this.selectedGoodsList.length > 0) {
                this.goodsList.forEach(row => {
                  this.selectedGoodsList.forEach(p => {
                    if (row.id === p.id) {
                      this.$refs.multipleGoodsList.toggleRowSelection(row);
                    }
                  });
                });
              }
            });
            ...
        },
    //单选
        handleSelect(selection,row){
          if(this.selectedGoodsList.length && this.selectedGoodsList.length >0){
            let index
            index = this.isSelectedGoods(row, this.selectedGoodsList)
            if (index > -1) {
              this.selectedGoodsList.splice(index, 1);
            } else {
              this.selectedGoodsList.push(row);
            }
          }else{
            this.selectedGoodsList.push(row)
          }
        },
   //判断是否存在的方法
        isSelectedGoods(row, list) {
          let rows = JSON.parse(JSON.stringify(row))
          //是否选取 -1表示没选中
          return list.findIndex(item => {
            return item.id == rows.id;
          });
        },
    //全选
        handleSelectAll(val){
            //全选
          if(val && val.length > 0){
            val.forEach(row=>{
              this.selectedGoodsList.push(row)
            })
            //数组去重
            let newData = {};
            this.selectedGoodsList = this.selectedGoodsList.reduce((preVal, curVal) => {
              newData[curVal.id]? "": (newData[curVal.id] = true && preVal.push(curVal));
              return preVal;
            }, []);
          }else{
            //全不选 直接从数组中删除当页的数据
            for(let i = 0;i<this.goodsList.length;i++){
              let index 
              index = this.isSelectedGoods(this.goodsList[i], this.selectedGoodsList)
              if (index > -1) {
            this.selectedGoodsList.splice(index, 1);
              } else {
                this.selectedGoodsList.push(this.goodsList[i]);
              }
            }
          }
        },
    //弹窗上的确定选择按钮
        choiceGoodsFun() {
          this.selectedGoods = JSON.parse(JSON.stringify(this.selectedGoodsList))
          this.closeDialog();
        },
    //关闭弹窗
        closeDialog(){
            this.selectedGoodsList = [];
        },
    //打开弹窗
    openDialog(){
        this.selectedGoodsList = JSON.parse(JSON.stringify(this.selectedGoods));
    }
     
}

项目着急临时想的方法，欢迎有更好的方法的大佬指教