使用el-table组件加上分页后，多选翻页和查询后仍保持选中状态及回显

使用el-table组件加上分页后，多选翻页和查询后仍保持选中状态及回显.实现表格翻页和查询后仍保持选中状态

一，实现表格翻页和查询后仍保持选中状态

在el-table中加 :row-key=“getRowKeys”，在type为selection的el-table-column中添加:reserve-selection=“true”，在js的methods中加getRowKeys方法，即可实现table翻页及搜索查询后仍保持之前的选中状态；

<el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      size="mini"
      stripe
      height="560px"
      @row-click="handleClickTableRow"
      @selection-change="handleSelectionChange"
      :row-key="getRowKeys"
    >
    <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>

js:

getRowKeys(row) {
      return row.id;
    },

二，实现表格多页面选中状态回显

使用el-table中的toggleRowSelection方法来实现回显功能

data(){
  return{
    tableData:[],//table数据
    selectListData:[],//需要回显的数据id数组
  }
}

获取需要回显的数据后使用toggleRowSelection方法实现回显

this.$nextTick(() => {
   this.tableData.forEach((row) => {
     if (this.selectListData.indexOf(row.id) >= 0) {
        this.$refs.multipleTable.toggleRowSelection(row, true)
     }
   })
 })