Javascript 具有分页的元素ui表

元素ui的问题，当我选中复选框并更改页面时，选择行复选框被删除，我需要在更改页面时保留选择项。我的意思是用户可以从许多页面中选择项目，而不会丢失以前页面中的项目

        <el-table
        ref="multipleTable"
      row-key="id"
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      style="width: 100%;"
    @select="myselect"
    @sort-change="sortChange"
      @selection-change="handleSelectionChange"
    :tree-props="{children: 'children'}"
    >




.......

      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />


and these functions
      myselect(selection, row) {
        console.log('this is selection', selection);
        console.log('this is row', row)
      },





  handleSelectionChange(val) {
    this.selectedShipments = val;
    window.localStorage.setItem('storedShipments', JSON.stringify(this.selectedShipments));
      },

    async getList() {
     this.listLoading = true;
     const { data } = await fetchShipmentList(this.listQuery);
      this.list = data.data;
      this.total = data.total;
      // Just to simulate the time of the request
     this.listLoading = false;
    },




   listQuery: {
        page: 1,
        limit: 10,
        search: undefined,
        status: undefined,
        sort: 'id',
        sortDir:'desc',
      },

.......
这些功能是什么
myselect（选择，行）{
console.log（'这是选择'，选择）；
console.log（'这是第行'，第行）
},
handleSelectionChange（val）{
this.selectedShippings=val；
window.localStorage.setItem（'storedShipments'，JSON.stringify（this.selectedShipments））；
},
异步getList（）{
this.listLoading=true；
const{data}=wait fetchShipmentList（this.listQuery）；
this.list=data.data；
this.total=data.total；
//只是为了模拟请求的时间
this.listLoading=false；
},
列表查询：{
页码：1，
限额：10，
搜索：未定义，
状态：未定义，
排序：“id”，
sortDir:“描述”，
},

对于SelectedShippings数组中的每个选定项目，您应在表上调用toggleRowSelection

应该是这样的

async getList（）{
this.listLoading=true；
const{data}=wait fetchShipmentList（this.listQuery）；
this.list=data.data；
this.total=data.total；
//只是为了模拟请求的时间
this.listLoading=false；
//我想应该在刷新后再做
这个.$nextTick（（）=>{
this.selectedShippings.forEach（r=>this.$refs.multipleTable.toggleRowSelection（r，true））
})
},

使用保留选择：数据刷新后是否保留选择，当类型为“选择”时工作。请注意，此操作需要行键

<el-table
  v-loading="listLoading"
  :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
  element-loading-text="Loading"
  border
  fit
  highlight-current-row
  @selection-change="handleSelectionChange"
  :row-key="getRowKey"
>
  <el-table-column type="selection" width="40" :reserve-selection="true" />

getRowKey(row){
  return row.id
},

getRowKey（行）{
返回row.id
},

这是相同的结果，而且我对所有行都有sub，就是这个效果。？