【解决】Element UI表格Table组件，点击翻页后之前选中的数据仍保留，勾选中的样式也会回显

【问题】

使用Element UI的表格Table组件，在第一页选中的数据，跳转到第其他页再返回第一页时，选中的数据消失。

【解决】

1. 查看Element 文档发现有这么两个属性：

①属性一：

②属性二：

然后根据这两个属性，开始进行操作，示例代码如下：

<el-table
  :row-key="getRowId" // 属性一
  @selection-change="handleSelectionChange" // 当选择项发生变化时会触发该事件
  :data="tableData"
  ref="multipleTable"
  style="width: 100%">
  <el-table-column
    type="selection" // 属性二
    width="180">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名">
  </el-table-column>
</el-table>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '1111',
          name: '王小虎',
        },{
          id: '2222',
          name: '王大虎',
        }],
        multipleSelection: [] // 存放勾选到的数据
      };
    },
    methods: {
	    getRowId(row) {
	      return row.id;  // row-key绑定的必须为唯一值
	    },
	    handleSelectionChange(val){
    	  this.multipleSelection = val; // 勾选到的数据
	    },
    }
  };
</script>

2. 经过以上两个属性的操作，发现在第一页勾选的数据在跳转到其他页时，可以得到在第一页时勾选的值，在@selection-change方法既handleSelectionChange方法内可以拿到。
3. 那么问题又来了，勾选的数据倒是可以保留，但是不会回显：也就是说我从其他页再跳回第一页时，之前勾选的第一页的数据还在，但是页面的勾选框显示未勾选状态。

4. 继续查看文档，又发现toggleRowSelection这个方法：

5. 那这就好办了，在每次点击翻页后，会执行获取数据列表的请求，在该请求成功后的回调里，执行下面这段代码：

示例代码如下：

if (this.multipleSelection .length > 0) { // 判断是否存在勾选过的数据
 this.tableData.forEach( row => {  // 获取数据列表接口请求到的数据
     this.multipleSelection .forEach( item => {  // 勾选到的数据
      if(row.id === item.id){
          this.$refs.multipleTable.toggleRowSelection(item, true); // 若有重合，则回显该条数据
        }
      });
   })
}

至此，实现想要的效果。