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

最新推荐文章于 2025-02-07 09:56:23 发布
最新推荐文章于 2025-02-07 09:56:23 发布
阅读量547 收藏 1
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue3知识点 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jieweiwujie/article/details/136293304
本文介绍了如何在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>

Vue3+ElemenPlus table支持跨页多选
朝花夕拾的博客
06-09 534
删除数据时页面还是勾选状态 添加此方法。proxy为当前组件实例。
vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中
weixin_44867717的博客
03-29 2435
【代码】vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中。
Vue3中el-table组件实现分页，多选以及回显
qq_50887722的博客
09-20 2264
Vue3 中 el-table 实现分页、多选以及数据的回显
【Element Ui】vue3 + element-plus : el-table多选表格，按 shift 可进行连选 - 封装成公共方法
alikami的博客
01-19 1929
vue3 + element-plus : el-table多选表格，按 shift 可进行连选 - 封装成公共方法
vue3+element-plus实现表格多选功能（可以清除选项或分页保留选项）
weixin_46319117的博客
03-03 8236
如图所示，在实际开发中，数据量大的表格基本都添加上了分页功能，每个页面请求的数据回交换更新，第一页的选中效果在跳转至第二页后，如果没有做相关处理，选中项会被清空，具体解决方法如下。至此，即使来回切换页面，也无法清除上次选中情况。
vue3 实现 table 跨页多选
lzfengquan的博客
05-17 620
注意的是 getRowKeys 方法中我们获取的是项目列表的每一项的id ，有可能数据返回的字段并不是id,我们要对接到后端，确定每条数据的唯一性标识。Vue3 配合 element-plus 实现表格的跨页多选，我们只需要去研究下官方配置的属性和事件即可。注意的是 要给多选框设定type类型为selection。
element ui分页多选,翻页记忆的实例
10-16
本文将介绍如何使用Element UI实现带有分页功能的表格组件，并实现多选及翻页记忆功能。这将涉及到Element UI的表格、分页组件以及组件间的数据交互。 ### Element UI分页组件的使用 Element UI的分页组件（el-...
element el-table表格切换分页保留分页数据+限制多选数量
红烧咸咸鱼
07-01 527
element el-table表格切换分页保留分页数据+限制多选数量
elementui:el-table支持搜索、切换分页多选功能，以及数据回显
最新发布
weixin_60172238的博客
02-07 887
el-table支持搜索、切换分页多选功能，以及数据回显
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
总的来说，结合Vue.js、Element UI的`el-table`组件和`file-saver`库，我们可以构建出强大的数据导出功能，即使面对分页数据也能轻松应对。这对于数据驱动的Web应用来说，无疑增加了其功能性和实用性。在实际开发中...
vue3实现el-table表格单选功能以及默认选中某一行数据以及多选
weixin_53339757的博客
11-08 1万+
vue3实现el-table表格单选功能以及默认选中某一行数据
vue3对element的table封装带分页
weixin_45128657的博客
03-05 458
【代码】vue3对element的table封装带分页。
vue3 | table选择组件封装，含单选、多选、跨页选择功能(vue3+element)
ydongabc
04-27 2457
单选时通过样式类 “hidden-checkbox-all” 隐藏checkbox全选框。
vue3 element 多选表格 翻页多选
m0_70953528的博客
05-29 380
【代码】vue3 element 多选表格 翻页多选。
Vue 3.X 表格组件el-table初始化时保持多选框的选中
AimerRhythm
08-25 2359
父页面调用子组件时，传入el-table中应当选中的值列表，但在使用toggleRowSelection时触发两次selection-change事件，无法正确显示。
vue3中使用el-table表格时，
weixin_55325334的博客
07-05 545
handleSelectionChange事件监听多选项的改变，可以在该事件函数中，改变/更新/保存 选中项的数据。可以动态设置要选中哪些。【我一开始没反应过来，就使用了自定义封装的el-checkbox】1. element plus组件库的el-table，有多选框。通过toggleSelection事件设置触发多选的事件；
VUE3+Element-Plus 实现分页组件跨页选择数据
qq_18116197的博客
03-07 1404
【代码】VUE3+Element-Plus 实现分页组件跨页选择数据。
vue3+element-plus 表格全选和跨页勾选，以及全选全部功能
热门推荐
鹤渺的星球
10-30 1万+
这个功能，需要考虑很多交互的逻辑，因为我写的是【全选全部】是一个checkbox的勾选框，所以要考虑取消勾选的功能，自然就有了上面真正实现时的难点。但是如果这个功能是通过一个按钮控制的，点击按钮就代表全选所有操作，那么自然不用考虑取消勾选和禁用的逻辑，因为全选所有时，就已经走完批量全选的流程了。两种实现方式根据业务具体的调整，这次也是为了记录实现这个功能时遇到的问题和思考。
Vue3 -- 设置分页，切换分页之后选项仍能保留 & 控制多个表格的选中不会互相影响
编程技术提升
10-10 1437
通过以上步骤，可以在 Vue 3 应用中实现分页功能，并确保在切换分页时选中的项能够保留，同时控制多个表格之间的选中状态不互相影响。这种设计提升了用户体验，使得操作更加直观和灵活。
el-table分页多选及回显
11-10
在Vue.js的Element UI库中的`el-table`组件中，分页、多选以及数据回显通常是结合在一起处理的高级功能。这里是一个简要说明： 1. **分页**：通过`el-pagination`组件配合`el-table`，可以实现数据的分页显示，用户可以在每一页查看部分数据，通常通过设置`page-size`属性控制每页显示多少条记录。 2. **多选**：在`el-table`的列头添加`type="selection"`属性，可以让每一行成为可选择状态，用户可以选择多行数据。这会触发`@select`或`@row-click`事件，用于获取所选数据。 3. **数据回显**：如果需要在页面加载时显示之前保存的状态，比如多选状态，可以先从服务器或本地存储（如Vuex或localStorage）获取已选择的数据，然后在`row-key`指定的字段上绑定这个状态，这样表格会根据回显的数据更新其展示。 例如，你可以这样做： ```html <template> <el-pagination :total="total" @current-change="handleCurrentChange"></el-pagination> <el-table :data="tableData" row-key="id" border v-model="selectedRows" @select="handleSelectionChange" > <!-- ...表头... --> <el-table-column type="selection" label="操作"> <!-- 处理复选框操作... --> </el-table-column> </el-table> </template> <script> export default { data() { return { total: 0, tableData: [], selectedRows: [], // 用于保存选中的行ID }; }, methods: { handleCurrentChange(page) { this.tableData = this.tableData.slice((page - 1) * this.perPage, page * this.perPage); }, handleSelectionChange(rows) { this.selectedRows = rows.map(row => row.id); // 更新当前选中的行ID }, // 其他方法... }, computed: { perPage: { get: () => this.$store.state.pageSize, // 如果是从Vuex获取分页大小 set(value) { this.$store.commit(&#39;setPageSize&#39;, value); } }, }, // 获取数据并初始化回显部分 async created() { const initialSelectedIds = await this.fetchInitialSelection(); // 假设这是一个获取初始选择的函数 if (initialSelectedIds.length > 0) { this.selectedRows = initialSelectedIds; } }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小云儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值