ElementUi多选框表格,翻页或搜索选中有记忆功能保持默认选中

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

data中的数据

data() {
    return {
      CenterLineTableData: [], // table数据
      onHandCenterTableData: [], // 需要回显的数据
    }
  },

一，实现表格翻页和查询后仍保在el-table中

在el-table中加 :row-key=“getRowKeys”，在type为selection的el-table-column中添加:reserve-selection=“true”，在js的methods中加getRowKeys方法

      <el-table ref="multipleTable" :data="CenterLineTableData" tooltip-effect="dark"  :row-key="getRowKeys" style="width: 100%" size="mini" border :header-cell-style="{background:'#f9f9f9'}" @selection-change="handleSelectionChange">
        <el-table-column type="selection" label="勾选" :reserve-selection="true" align="center"></el-table-column>
        <el-table-column prop="id" label="线路ID" min-width="140px" :show-overflow-tooltip="true" align="center"></el-table-column>
      </el-table>

js中getRowKeys方法：

getRowKeys(row) {
      return row.id;
    }

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

定义一个回显数据的方法，获取需要回显的数据后使用toggleRowSelection方法实现回显，直接在翻页或者搜索的后面调用这个方法

// 回显
    echo() {
      const _this = this
      _this.$nextTick(() => {
        _this.CenterLineTableData.forEach((row) => {
          if (_this.onHandCenterTableData.indexOf(row.id) >= 0) {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          }
        })
      })
    },