element-ui table表格多选框如何做到出现分页时保留原有选中项

element-ui table表格多选框如何做到出现分页时保留原有选中项，关键点有两个：

1、reserve-selection属性，代码使用如： <el-table-column type="selection" reserve-selection"></el-table-column>，文档这样说：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key），这里提到了需指定 row-key，这时只需在<el-table></el-table>中添加属性row-key并设置每行独有的key值

2、<el-table></el-table>添加属性row-key，这个属性官方文档解读为：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。代码如：<el-table :row-key="selRowKey"></el-table>

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    :row-key="selRowKey">
    <el-table-column
      type="selection"
      reserve-selection
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>

data() {
      return {
        tableData: [{
          date: '2024-01-09',
          name: '小明',
          address: '北京市'
        }, {
          date: '2024-01-09',
          name: '小明',
          address: '北京市'
        }, {
          date: '2024-01-09',
          name: '小明',
          address: '北京市'
        }],
        multipleSelection: []
      }
    },

    methods: {
      //为行设置独有key
      selRowKey(row){
        return row.id
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }