vue3 element ui el-table分页多选功能

前端小云儿

于 2024-02-26 10:24:39 发布

阅读量523

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3知识点文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136293304

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在Vue3中使用Element UI的el-table组件实现分页时保持多选状态。关键步骤包括设置`:row-key="id"`以指定唯一行标识和在`el-table-column`中配置type为'selection'，加上`:reserve-selection="true"`来保留选择项。

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

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

一、在el-table中添加 :row-key=“id”

<el-table :data="tableData" border style="width: 95%" 
 @selection-change="handleSelectionChange"  
    row-key="id">

二、在el-table-column中设置 type=“selection” 并且设置 :reserve-selection=“true”

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