ElementUi多选框表格,翻页选中有记忆功能保持默认选中_elementui表格页面切换保持全选状态

在用vue+elementui开发表格的时候会遇到多选功能，其中就有这种需求，第一页全选，然后翻到第二页，还需要保持之前选中的状态。简单的说就是让表格翻页选中仍然有记忆功能。切换分页持久化选中表格，其实关键代码就这2行.:row-key="(row)=>{ return row.id}".:reserve-selection=“true”

在用vue开发表格多选功能时，遇到一个翻页后需要保持之前选中的状态。简单说就是让表格翻页选中仍然有记忆功能。

我用的是ElementUi，不得不说ElementUi做的还是非常好的。

废话不多说，下面描述实现的步骤和代码

第一步：给表格添加 row-key

<el-table id="iTable" v-loading.iTable="options.loading" :data="list" :stripe="options.stripe"
    ref="mutipleTable"
    @selection-change="handleSelectionChange"
    @select="handleSelect"
    :show-header="options.showHeader"
    @row-click="rowClick"
    :row-key="(row) => row.id"
    >
1
2
3
4
5
6
7
8

关键点：:row-key="(row) => row.id"

第二步：给多选框加默认选中功能

 <!--region 选择框-->
  <el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;" :reserve-selection="true">
  </el-table-column>
1
2
3

切换分页持久化选中表格，其实关键代码就这2行

:row-key="(row)=>{ return row.id}"
:reserve-selection="true"
1
2

注意id需要唯一

其他可能用到的方法

@selection-change 会返回所有选中的数据
@select 会返回所有选中的数据及当前操作的数据