【解决】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" // 属性二
    :reserve-selection=“true”
    width="180">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名">
  </el-table-column>
</el-table>
<script setup>
const state = reactive({
  tableData: [{
    id: '1111',
    name: '王小虎',
  }, {
    id: '2222',
    name: '王大虎',
  }],
})
const multipleSelection = ref([]) // 存放勾选到的数据
const getRowId = (row) => {
  return row.id  // row-key绑定的必须为唯一值
}
const handleSelectionChange = (val) => {
  multipleSelection.value = 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(row, true); // 若有重合，则回显该条数据
        }
      });
   })
}