elementuiplus的多选表格 回显以及分页保存之前选择

前言：

最近在做elementui的多选表格回显表格和保持之前选择。记录下

需求：

1、查看表格的时候，需要勾选上已经选择的学校（回显）

2、在分页的时候，保存上一页面已经勾选的学校（分页是后端处理）

实现

前提：本人的代码是对table表格进行了封装。如果你们没有封装 请自行结合我的逻辑进行代码编写

基础代码：

<grid-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%; max-height: 400px"
    :total="total"
    v-loading="loading"
    element-loading-text="Loading"
    border
    fit
    :header-cell-style="{ 'text-align': 'center' }"
    highlight-current-row
    reserve-selection
    row-key="Id"
    :page="{
      layout: 'prev, pager, next,sizes, jumper, total',
      pageIndex: pages.PageIndex,
      pageSize: pages.PageSize,
      pageSizes: pages.pageSizes,
    }"
    @pageChange="onPageChange"
    @selection-change="onHandleSelectionChange"
  >
    <el-table-column type="selection" width="55" :reserve-selection="true" />
    <el-table-column label="名称" prop="Name"></el-table-column>
    <el-table-column label="类型" prop="Type"></el-table-column>
</grid-table>

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

const onSearchShcool = async () => {
  const res = await schoolGetlist(query.value);
  if (res.Type === 200) {
    tableData.value = res.Data.Rows;
    total.value = res.Data.Total;
    nextTick(() => {
      multipleTableRef.value?.toggleRowSelection(res.Data.Rows[0], true)
    })
  }
  loading.value = false;
};

1、先说第一个问题：（回显）

在通过接口获取数据之后，使用toggleRowSelection方法进行回显

上面的代码由于是我写的测试，所有直接把数组的第一个默认为已经选择过的。实际情况一搬是：接口返回的数据中有一个字段代表是否之前选择过。如果这个字段是true,则将这条数据multipleTableRef.value?.toggleRowSelection(obj, true)回显。

2、第二个问题：（分页保存之前选择的）

1、请在table上添加row-key。row-key一般是你的唯一Id。

2、<el-table-column type="selection" width="55" reserve-selection />

这样就可以做到分页保存之前选择的