element表格勾选数据，表格保持勾选状态

ElementUI

表格添加row-key

表格添加select-on-indeterminate属性

表格添加selection-change方法

el-table-column添加reserve-selection属性

在使用 ElementUI 表格时，我们经常遇到这样的场景：用户在表格中勾选数据后，执行分页操作返回时，先前勾选的状态会被清空。如果想要在分页操作后保留用户的勾选状态，ElementUI 提供了一些内置的 API和属性

主要包含以下四个步骤：

1. 表格添加 row-key

row-key 是 ElementUI 表格中用于唯一标识每一行数据的属性。通过设置这个属性，我们可以确保每条数据在分页时能保持唯一标识，从而在分页后保留勾选状态。

<el-table
  ref="multipleTable"
  :data="tableData"
  style="width: 100%; margin-top: 20px"
  row-key="articleId"
>
</el-table>

2. 表格添加 select-on-indeterminate 属性

select-on-indeterminate 属性用来控制表格在全选框处于“部分选中”状态时的行为。启用该属性后，当全选框处于半选状态，再次点击时将会触发全选。

<el-table
  ref="multipleTable"
  :data="tableData"
  style="width: 100%; margin-top: 20px"
  row-key="articleId"
  select-on-indeterminate
>
</el-table>

3. 监听 selection-change 事件

当用户在表格中勾选或取消勾选某些行时，selection-change 事件会被触发。在这个事件中，我们可以获取到当前被选中的数据，并将其存储起来。

<el-table
  ref="multipleTable"
  :data="tableData"
  style="width: 100%; margin-top: 20px"
  row-key="articleId"
  select-on-indeterminate
  @selection-change="handleSelectionChange"
>
</el-table>

handleSelectionChange 方法用于将用户勾选的行保存起来:

handleSelectionChange(val) {
  this.multipleSelection = val;
}

4. 在 el-table-column 中添加 reserve-selection 属性

reserve-selection 属性用于确保用户在分页时，已经勾选的行不会被取消。通过启用这个属性，可以在用户切换分页后保留选中的状态。

<el-table-column
  type="selection"
  width="55"
  :reserve-selection="true"
></el-table-column>

通过配置 row-key、启用 select-on-indeterminate 属性、监听 selection-change 事件以及添加 reserve-selection，可以实现 ElementUI 表格在分页操作后依然保留用户勾选状态的功能。在切换分页时，无需重新勾选已经选中的数据。