el-table加分页后多选翻页后仍保持选中状态

已于 2024-04-09 17:26:20 修改
阅读量674 收藏 2
点赞数 3
文章标签： vue.js 前端
于 2024-04-09 17:26:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53942074/article/details/137560191
版权

在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="dark"
      size="mini"
      stripe
      height="560px"
      @row-click="handleClickTableRow"
      @selection-change="handleSelectionChange"
      :row-key="getRowKeys"
    >
    <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>

getRowKeys(row) {
      return row.id;
    },

心止不住的痛
关注
el-table 换页保持选中
MarsDMC的博客
01-20 355
el-table 换页保持选中 <el-table :row-key="(row) => row.accountId" ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" > <el-table-column type="selection" :reserve-selection="true" width="5
el-table跨页多项选中
MyHappinessIsU的博客
03-08 1265
本文意在解决用 element-ui 中 table 时，需要选中行，并且结合分页做翻页操作时，保留前一页选中
el-table翻页记录已选状态
weixin_46753476的博客
08-12 253
el-table翻页记录已选状态。记录一个弹窗点击确定按钮后，el-table列表保存已勾选的数据信息 再次打开弹窗，回显勾选所有保存的数据信息 切换分页，重新请求接口，新的数据也要回显勾选的数据
elementui el-table表格实现跨页(翻页)保存勾选状态(后端分页)
树上骑个猴的博客
12-23 7184
思路：后端分页导致每一页之间的勾选状态都是独立的，我们需要新建一个数组来保存这些被勾选数据的id，当切换到某个页码时，从数组中进行比对，如果当前页码有待勾选的id，则用代码让当前页码的数据勾选起来。 注意： 不要使用row-key 和 reserve-selection 。否则导致自己管理的勾选状态与el-table自身保存的勾选状态互相冲突，导致状态难以管理。我们的目的是，表格的勾选状态均由代码来控制 提示： 本文代码仅包含关键代码，用于提供思路，无法直接运行使用。 第一步: 给el-table添加.
el-table分页多选，切换下一页后上一页仍然保持勾选状态
tt1234561009的博客
08-31 2373
el-table默认切换分页后，前一页选中的数据项会自动取消选中。而在实际开发中大部分场景是希望切换分页后不要清除上一页已选的数据项。
vue3实现el-table翻页选中数据不变及根据已有数据默认选中
在工作中记录下美好的瞬间~~
10-24 1701
在el-table中添加:row-key='getRowKey'属性，在type=selection的el-table-column中添加:reserve-selection='ture'1、实现翻页选中数据不变。2、根据已有数据默认选中。
el-table中保留分页选中
jl15988
08-31 1082
对于数据表格，貌似这种需求不是非常常用，对于小数据量来说，checkbox就已经能够足够满足我们的要求，但往往对于大数据量可能需要通过表格来实现选择。场景：对数据表格中数据进行选取，然后保存的数据操作。不过需要指定行的key，我们可以在。下面提供分页多选且赋初始选中的方案。
el-table中选择框在分页的时候保持选中状态
weixin_58442608的博客
10-11 671
el-table中选择框在分页的时候保持选中状态。
vue 基于el-table实现多页多选、翻页回显过程
小球的博客
09-14 8376
el-table实现多页多选功能 el-table实现翻页回显功能
element ui分页多选,翻页记忆的实例
10-16
翻页记忆功能是指当用户翻页后，再次回到之前翻过的页码时，之前选中的数据仍然能够保持选中状态。这一功能的实现依赖于几个关键的技术点： - 记录当前选中的数据：通过监听selection-change事件，并在事件处理函数...
使用el-table实现分页选择
再来一块红烧肉
08-31 9637
使用el-table实现分页选择 element 多选Table分页 iview 分页选择 分页勾选
el-table实现跨页多选
qq_45021462的博客
02-18 852
el-tabel实现跨页多选
Vue3 - Element plus 实现 “带分页“ 表格组件，实现跨页进行 “分页勾选“ 的多选功能（解决分页表格组件 ＜el-table＞ 跨页后已前勾选的行自动消失问题）详细示例解决教程
王佳斌
03-02 5312
vue3 element puls表格跨页全选实现，vue3 element puls表格,后端分页时,实现分页多选功能，element puls跨页多选，element puls 表格跨分页多选及回显的实现示例，表格分页多选功能，vue3 elementPlus设置表格跨页勾选，vue3 Element plus 最新分页跨页全选操作(跨页记住已经勾选)，vue3 element plus table组件跨分页多选及回显，vue3 element plus el-table-column type="se
el-table实现分页切换后还能继续保持之前的勾选状态
博客简介
07-06 1796
el-table实现表格分页后还能继续保持勾选并且序号实现累加
el-table分页保留勾选的数据
weixin_42375707的博客
05-27 3989
目前选中了5条数据点击下方切换分页，选中的数据消失了。
el-table多选框设置默认选中，翻页保留选中状态
Aecho15的博客
09-21 6798
el-table多选框设置默认选中，翻页保留选中状态
el-table加分页后多选翻页和查询后仍保持选中状态及回显
qq_53026081的博客
09-22 1707
这样，当你进行分页或搜索查询时，之前选中的行数据仍会保持选中状态。方法实现选中状态的回显。将需要回显的数据的 ID 存储在。方法来获取行的唯一标识，以便在翻页和搜索后保持选中状态。方法，我们确保使用每个行的唯一标识作为标识符。数组，以便在需要时可以访问选中的行数据。数组绑定到表格的数据源。监听选中状态的变化，我们可以在。引用到表格组件的实例，并使用。数组中，并在适当的时候使用。我们定义了一个表格组件，并将。方法切换行的选中状态。
el table翻页默认选中
bobringtheboys的博客
08-26 875
因为我的table有翻页功能 然后当我翻页的时候table所渲染的数据会刷新,当我再回到之前所做了选择的页面的时候,table不会记录我之前的选中状态. 在我的table中有两个事件 @select="selectOne" @select-all="selectAll" selectOne 点击table每行前面的选择框 // defaultList 初始化的list 也是我所需要渲染选中的list // 首先判断我当前勾选的这条数据在不在defaultList里面 用findIndex 通过某条件找
el-table 如何在多选如何在分页里面保存选中状态
最新发布
09-12
在Vue.js的Element UI库中，`el-table`组件用于展示数据表格并支持丰富的功能，包括分页和多选。如果需要在分页切换时保持选择的状态，可以借助`keep-alive`或`sessionStorage`等机制来保存选中信息。 以下是基本步骤： 1. **数据管理**: - 使用`v-model`绑定一个数组，存储用户的选择项，例如`selectedItems`。 ```html <template> <el-pagination :current-page="currentPage" @current-change="handlePageChange"></el-pagination> <el-table :data="tableData" v-model="selectedItems"> <!-- 表格列 --> </el-table> </template> <script> export default { data() { return { currentPage: 1, tableData: [], // 这里假设已经加载了分页数据 selectedItems: [] // 保存选择的数据项 }; }, methods: { handlePageChange(page) { this.currentPage = page; // 更新当前页 // 如果有分页策略，记得同步数据 this.getTableData(page); // 获取新的数据 } }, }; </script> ``` 2. **处理分页数据获取**: - `getTableData(page)`函数应该从服务器或缓存中获取对应页数的数据，并确保将用户的已选数据更新到新数据上。 3. **持久化选择**: - 使用`keep-alive`时，可以在路由守卫（如`beforeRouteUpdate`）中保存和恢复选中状态。 - 或者，在`beforeDestroy`生命周期钩子中，使用`sessionStorage`或本地存储（localStorage、vuex等）将选中状态序列化存储。 ```javascript // 使用 keep-alive 和生命周期钩子 <template> <keep-alive> <router-view :key="viewKey"></router-view> </keep-alive> </template> <script> export default { beforeDestroy() { // 使用 sessionStorage 存储选中状态 localStorage.setItem('selectedItems', JSON.stringify(this.selectedItems)); }, created() { const storedItems = localStorage.getItem('selectedItems'); if (storedItems) { this.selectedItems = JSON.parse(storedItems); } }, }; </script> ``` 请注意，这种方式仅适用于单页应用（SPA）。如果是传统的服务器渲染应用，那么你需要在后端处理这个状态保存的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值