element ui的table选择遇到的坑（如翻页选中态消失）

产品需求实现两步的弹窗选择加table选中并展示到新的表格中，基本样式如下


1.在列表选择页选择数据展示到下面的新table中，但是翻页回来列表的选中态就取消了，根据ui文档的方法可以加上row-key

       <el-table //标签添加
         :row-key="getRowKey"
       ></el-table>
         //js
      getRowKey(row) {
      //缓存列表状态
      return row.id; //唯一表示，也可以直接跟着标签row-key后面写
    },
    //加上row-key不行的话还可以加上reserve-selection="true"
    <el-table-column
      type="selection"
      reserve-selection="true"
      width="55">
    </el-table-column>

2.点击下面table的取消选中上面的table的选中态也要跟着变，用ui文档上给的toggleRowSelection()方法在每次剩两个取消一个的时候就会出现列表状态不发生变化。解决方法如下，配合上面的方法就算翻页也可任意取消

    offCheck(id) {//multipleTable是el-table的ref,selection是上面table所有选中的数据,可以用他跟下面选中的table数据做比较
      //选中的表格取消事件
      this.$nextTick(() => {
        this.$refs.multipleTable.selection.forEach((ele) => {
          if (ele.id == id) {
            this.$refs.multipleTable.toggleRowSelection(ele, false); //指定元素取消选中：ele要取消选中的元素,fasle取消选中,true为选中
          }
        });
      });
    },

3.点击上一步回来，上面table的选中态失效，解决办法

        .then((res) => { //这是我上面table请求回来的数据
          if (res.error_code == 0) {
            this.add_gradeList = res.data.data;
            this.add_gradeList.forEach((ele)=>{   //checkoutTable是选中展示的table数据
             this.checkoutTable.forEach((item)=>{
                if(ele.id == item.id){
                   this.$refs.multipleTable.toggleRowSelection(ele, true);
                }
              })
            })
          }
        });

4可以根据以下方法判断点击的时候是true还是false

 let selected = selection.length && selection.indexOf(row) !== -1;
 //selected就是当前点击的选中态，ui的change事件第一个参数就是它