element-table在分页的情况下，记录选框状态，然后排序后选框出现问题

Question

目前的需求：

1. 分页式的表格，假设每页显示50条数据
2. 切换页码的时候，已选择项依旧存在
3. 点击排序按钮，后台进行排序，获取排序后的表格数据，重新渲染表格
4. 勾选某行，再点击排序按钮，重新渲染表格后，该行数据的选框依旧为选中状态

目前：前3点已实现，但第4出现以下问题：

• 勾选某一行的选框：假设该行的key为1029，默认排在第6行
• 点击排序按钮后：key为1029的数据行的行数由于排序发生改变，排在当页或者其他页的新位置上，选框变为不勾选，第6行的选框依旧为勾选状态

以下是相关涉及到的核心代码

<el-table 
  class="el-ui-table"
  ref="multipleTable"
  :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
  :height="tableHeight"
  :row-key="getRowKeys"
  tooltip-effect="dark"
  @cell-mouse-enter="cellMouseEnter"
  @cell-mouse-leave="cellMouseLeave"
  @select="handleSelectEvent"
  @select-all="handleSelectAll"
  @selection-change="handleSelectionChange"
  @sort-change='sortChange'>
  <el-table-column type="selection"
    prop="selection"
    :resizable="false"
    :reserve-selection="true"
    width="55">
  </el-table-column>
  <el-table-column
    v-for="(item,index) in indicatorsTh"
    width="165"
    :resizable="false"
    :prop="item.prop"
    sortable="custom"
    :sort-orders="['ascending', 'descending']"
    :key="item.key"
    show-overflow-tooltip>
</el-table>
<div class="pagination-wrapper" v-if="true">
  <el-pagination
    layout="total, prev, pager, next, slot"
    :total="total"
    :page-size="pagesize"
    @current-change="handleCurrentChange">
    <span>已选 {{ multipleSelection.length }} 项</span>
  </el-pagination>
</div>

<script>
  
  export default {
    data() {
      return {
        multipleSelection: [],
        total: null,
        pagesize:50,
        currentPage:1,
        getRowKeys(row) {
          return row.stkCode  // 每一行唯一的标识
        }
      }
    },
    methods: {
      handleCurrentChange:function(currentPage){  // currentPage 改变时会触发
        this.currentPage = currentPage;
      },
      handleSelectionChange(rows) {  //当选择项发生变化时会触发该事件
        this.multipleSelection = rows
        console.log(this.multipleSelection)
      },
      clearAllSelect () { // 清空选择的值
        this.$refs.multipleTable.clearSelection()
      },
      handleSelectEvent(selection, row) { 
        // 当用户手动勾选数据行的 Checkbox 时触发的事件
      },
      handleSelectAll(selection) { 
        // 当用户手动勾选全选 Checkbox 时触发的事件
      },
      sortChange: function(column, prop, order) { // 当表格的排序条件发生变化的时候会触发该事件
        this.sortList.num = this.indicatorsTh.findIndex(item => {
          return item.prop == column.prop
        }) + 2
        'ascending', 'descending'
        if (column.order == 'ascending') {
          this.sortList.direct = 1
        }
        if (column.order == 'descending') {
          this.sortList.direct = -1
        }
        // 根据排序，更新表格数据
        this.getTableDate(this.sortList)
      },
    }
  }
  </script>

按照原理来说
已设置:reserve-selection="true"，选中项是绑定的每行的row.stkCode，那应该不会出现这种bug才对啊？

Answer 1

后台排序时，更新表格数据的时候，对于对象数组的地址理解有问题，改了下就没问题了。以后要多注意这方面

Answer 2

是不是因为远程排序的原因？