element-ui中的el-table实现分页多选功能

原创已于 2024-01-04 17:37:05 修改 · 8k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #vue.js

于 2023-05-05 13:48:35 首次发布

element-ui 专栏收录该内容

40 篇文章

订阅专栏

在Element-UI的el-table组件中，通过设置:row-key属性为getRowKeys方法并返回行的唯一标识，以及在多选列设置:reserve-selection=true，可以实现分页时多选状态的保留。selection-change事件则用于监听选择项的变化，但分页切换会导致选中数据清空。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-ui中的el-table实现分页多选功能

一、分页多选
- 1.在el-table中添加 :row-key="getRowKeys"
- 2.然后第一列，即有多选框的一列，添加 :reserve-selection="true"

selection-change事件：当选择项发生变化时会触发该事件（当分页切换时，选中的数据都会自动清空）

一、分页多选

1.在el-table中添加 :row-key=“getRowKeys”

<el-table
      ref="form"
      :model="form"
      :row-key="getRowKeys"
      @selection-change="handleChange"
>
</el-table>

getRowKeys(row) {
	return row.id
},
handleChange(selection) {
    console.log(selection)
}

2.然后第一列，即有多选框的一列，添加 :reserve-selection=“true”

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

链接: https://blog.csdn.net/qq_36157085/article/details/122922678