vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据

最新推荐文章于 2025-02-07 09:56:23 发布

景尘

最新推荐文章于 2025-02-07 09:56:23 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/lbPro0412/article/details/102518937

前端vue技术点干货分享专栏收录该内容

77 篇文章 ¥99.90 ¥299.90

订阅专栏

本文介绍了如何在Vue结合Element-UI的Table组件中实现多选并保持分页切换时选中状态的效果。关键在于设置`row-key`和`reserve-selection`属性，并使用`handleSelectionChange`事件来保存和恢复选中数据。

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

效果：（切换分页回显选中的数据）

代码案例：

<el-table
                ref="multipleTable"
                border
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :row-key="getRowKeys"
              >
                <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
                <el-table-column prop&#

了解本专栏