el-table分页多选框勾选回显
时间: 2025-02-07 09:07:16 浏览: 62
### element-ui `el-table` 分页多选框勾选回显解决方案
为了使 `el-table` 的分页功能支持多选框的状态回显,需设置特定属性并编写相应逻辑处理函数。
#### 设置表格配置项
在 `<el-table>` 组件中加入 `:row-key="record => record.id"` 属性来指定唯一键名作为每一行数据的身份标识符[^2]。这有助于框架识别不同页面间的相同记录条目,从而保持其选择状态不变。
```html
<el-table
:data="tableData"
border
:header-cell-style="headClass"
:row-style="{ height: '15px' }"
style="width: 100%"
@selection-change="handleSelectionChange"
ref="multipleTable"
:row-key="record=>record.id"
tooltip-effect="dark">
</el-table>
```
#### 配置多选列选项
对于包含多选框的第一列表格列定义部分,应增加 `:reserve-selection="true"` 参数以启用记忆上次已选中的项目特性:
```html
<el-table-column
type="selection"
:reserve-selection="true"
width="55">
</el-table-column>
```
#### 编写事件处理器
当用户改变当前所选行时触发 `@selection-change` 事件,并通过自定义的方法如 `handleSelectionChange(selection)` 来接收最新的被选中对象数组[^1]。此方法可用于更新内部存储的选择集合并同步至其他组件或服务端接口调用。
```javascript
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
console.log('Selected Rows:', JSON.stringify(this.selectedRows));
}
}
```
以上措施共同作用下可以有效解决 `el-table` 中由于翻页操作引起的选择丢失现象,确保用户体验流畅一致。
阅读全文
相关推荐


















