el-table 换页保持选中

Vue.js：el-table换页保持选中状态
最新推荐文章于 2025-07-25 14:52:37 发布
原创 最新推荐文章于 2025-07-25 14:52:37 发布 · 464 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端

本文介绍了如何在使用Vue.js的el-table组件时，实现切换页面时保持表格选中行的状态。关键步骤包括设置行唯一id如`:row-key="(row) => row.accountId"`，以及在选项列中启用`:reserve-selection="true"`来保留选择。

el-table 换页保持选中

<el-table
      :row-key="(row) => row.accountId"
      ref="multipleTable"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="se
最低0.47元/天 解锁文章
【ElementUI el-table跨页勾选】
sunshineTing2的博客
09-12 287
【代码】【ElementUI el-table跨页勾选】
el-table 翻页后保留所勾选项
weixin_46677214的博客
11-15 5416
el-table 翻页后保留所勾选项 前言 在本周的开发中，碰到一个表格翻页之后，仍然保留所勾过的选项的功能。在原组件中，并没有这样的功能，所以经过查找分析，就有了下面的一个例子，分析给大家。 思路 查找资料后可得 为了实现保留的功能，所以需要存储勾选内容的数组（selectedItems） 通过el-table中的toggleRowSelection方法，可以设置行的选中状态。 通过el-table中的select和select-all获得勾选或者取消的内容 步骤 表格勾选 表格单选 因为翻页之后，
elementui el-table表格实现跨页(翻页)保存勾选状态(后端分页)
树上骑个猴的博客
12-23 8256
思路：后端分页导致每一页之间的勾选状态都是独立的，我们需要新建一个数组来保存这些被勾选数据的id，当切换到某个页码时，从数组中进行比对，如果当前页码有待勾选的id，则用代码让当前页码的数据勾选起来。 注意： 不要使用row-key 和 reserve-selection 。否则导致自己管理的勾选状态与el-table自身保存的勾选状态互相冲突，导致状态难以管理。我们的目的是，表格的勾选状态均由代码来控制 提示： 本文代码仅包含关键代码，用于提供思路，无法直接运行使用。 第一步: 给el-table添加.
el-table实现分页切换后还能继续保持之前的勾选状态
maohangfei.cn
07-06 2061
el-table实现表格分页后还能继续保持勾选并且序号实现累加
el-table page翻页后保留所勾选项。
qq_44978498的博客
02-16 750
el-table page翻页后保留所勾选项。
el-table多选，分页切换时，选中内容不变；清空多选的内容
Aa12364567的博客
09-18 895
设置true【 :reserve-selection=“true”】el-table中添加:row-key=“getRowKeys”
el-table 实现翻页多选
qq_42396813的博客
01-08 1216
el-table 实现翻页多选，保持选中状态
element el-table表格切换分页保留分页数据+限制多选数量
红烧咸咸鱼
07-01 614
element el-table表格切换分页保留分页数据+限制多选数量
关于el-table中翻页后保留勾选
feifei0987654321的博客
03-14 1695
原有的表格勾选只保留当前页的，一旦翻页则重新计算。因此，需要进行优化。注意：1、row-key要为实际上data实际的关键字段2、select的三个方法都要用到，不能省略3、selection-change：是正常选择勾选时，调用的。4、select-all：是点击全选时，调用的5、select：是点击取消时，调用的selectList：[] ===> 当前页勾选的选项delSelect: [], ===> 为了取消勾选的选项而存在，将其存入。
el-table翻页后保持勾选
最新发布
var_infinity的博客
07-25 414
el-table，翻页保持勾选
el-table加分页后多选翻页后仍保持选中状态
m0_53942074的博客
04-09 1059
el-table加分页后多选翻页后仍保持选中状态
el-table选中后跳转页面保持选中
云雨之石的博客
07-11 399
el-table跳转页面保持选中
el-table加分页后多选翻页和查询后仍保持选中状态及回显
qq_27408917的博客
10-29 5349
1.实现表格翻页和查询后仍保持选中状态 在el-table中加 :row-key=“getRowKeys”，在type为selection的el-table-column中添加:reserve-selection=“true”，在js的methods中加getRowKeys方法，即可实现table翻页及搜索查询后仍保持之前的选中状态； <el-table ref="multipleTable" :data="tableData" tooltip-effect="
el-table翻页 保存勾选数据
m0_57675056的博客
03-12 645
获取表格数据的时候调用restoreSelection方法手动更新选中状态。在翻页时，遍历当前页的数据，检查是否在。方法设置为选中状态。
[转]el-table表格翻页后仍记忆所选项
mao_mao37的博客
04-17 374
大佬博客 el-table多选，对于当前页的多选我们是很容易知道并显示给用户的，但是对于分页后要记住哪些页多选了哪些数据，并正确的显示给用户就有点小挑战了。具体实现：第一种，搬运工在此?，来自于大佬的文章详戳? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
el table翻页默认选中
bobringtheboys的博客
08-26 970
因为我的table有翻页功能 然后当我翻页的时候table所渲染的数据会刷新,当我再回到之前所做了选择的页面的时候,table不会记录我之前的选中状态. 在我的table中有两个事件 @select="selectOne" @select-all="selectAll" selectOne 点击table每行前面的选择框 // defaultList 初始化的list 也是我所需要渲染选中的list // 首先判断我当前勾选的这条数据在不在defaultList里面 用findIndex 通过某条件找
【解决】Element UI表格Table组件，点击翻页后之前选中的数据仍保留，勾选中的样式也会回显
huangfuyk.的博客
12-04 5123
解决：使用Element UI的表格Table组件，在第一页选中的数据，跳转到第其他页再返回第一页时，选中的数据消失。
el-table换页后scrollbar回到最上面
12-31
### 解决 Element UI `el-table` 分页后滚动条未重置的问题 为了确保在分页操作之后，表格的滚动条能够自动返回到顶部位置，在 Vue 和 Element UI 中可以采用几种不同的策略来实现这一功能。 #### 方法一：监听 Page Change 事件并手动设置 Scroll Top 通过监听分页组件触发的 page-change 或 current-change 事件，在每次页面变化时获取当前表格主体部分的 DOM 节点，并将其 scrollTop 属性设为 0 来强制使滚动条回到顶部[^1]。 ```javascript handleCurrentChange(val) { // 执行分页逻辑... // 将滚动条移至顶端 this.$nextTick(() => { let bodyWrapper = this.$refs.multipleTable.bodyWrapper; if (bodyWrapper) { bodyWrapper.scrollTop = 0; } }); } ``` #### 方法二：利用 key 值刷新 Table 组件 另一种方式是在改变分页参数的同时更改 table 组件绑定的 :key 属性值。这样做会使整个表格重新渲染，从而自然地将滚动条恢复默认状态即顶部位置[^3]。 ```html <template> <el-table ref="multipleTable" :data="tableData" :key="tableKey"> <!-- 表格内容 --> </el-table> </template> <script> export default { data() { return { currentPage: 1, tableKey: Date.now(), // 初始化时给定唯一键值 }; }, methods: { handleSizeChange(size) { this.pageSize = size; this.fetchData(); }, handleCurrentChange(page) { this.currentPage = page; this.tableKey = Date.now(); // 更新表单key以达到刷新效果 this.fetchData(); }, }, }; </script> ``` 这两种方法都可以有效地处理分页后的滚动条定位问题，具体选择哪种取决于实际应用场景和个人偏好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值