el-table切换分页后保持勾选状态不变

最新推荐文章于 2024-03-26 10:39:06 发布
最新推荐文章于 2024-03-26 10:39:06 发布
阅读量1.3k 收藏
点赞数 3
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_zhiwei0728/article/details/127863257
版权

 解决上述问题需要用到table组件中的两个属性：reserve-selection和row-key，使用方法如上图所示：

<el-table
  :row-key="(row)=>{ return row.id}"
  :row-class-name="tableRowClassName"
   @selection-change="handleSelectionChange">
   <el-table-column type="selection" width="100px" :reserve-selection="true"></el-table-column>
</el-table>

wang_zhiwei0728
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3企业级项目二次封装el-table、分页
06-28
介绍： 1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用<script setup>语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注！在书写的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：生命周期、上下文、api使用、资源处理等内容实现。 适合人群： 1、具备一定编程基础，工作1-3年的研发人员 能学到什么： 封装技巧、api使用、 阅读建议： 此资源以开发简化版element-plus学习其原理和内核，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
elementui el-table表格实现翻页和搜索均保持勾选状态（后端分页）
JJ_Smilewang的博客
01-11 5992
不管是页面切换还是通过搜索获取数据，都要保持已选中的行保持勾选状态，同时将选中行的内容以标签的形式显示出来，当点击关闭标签时可以对应取消选中状态，点击行中的任意位置也可以切换选中状态，单独勾选复选框一样可以达到要求。由于需求相对还是蛮复杂的，直接使用。所以直接通过书写代码来控制表格的勾选状态。注意：我使用的是vue3 + ts!!!!
el-table分页多选，切换下一页后上一页仍然保持勾选状态
tt1234561009的博客
08-31 1732
el-table默认切换分页后，前一页选中的数据项会自动取消选中。而在实际开发中大部分场景是希望切换分页后不要清除上一页已选的数据项。
element-plus中el-table分页勾选记住勾选内容并限制数量
最新发布
attach_uzi的博客
03-26 606
element-plus中el-table分页勾选记住勾选内容并限制数量
el-table多选：设置初始勾选状态、跨页保持勾选状态，同时能与一个已选择列表进行动态联动
cmelody的博客
12-20 8098
el-table多选：设置初始勾选状态、跨页保持勾选状态，同时能与一个已选择列表进行动态联动
el-table中保留分页选中
jl15988
08-31 1033
对于数据表格，貌似这种需求不是非常常用，对于小数据量来说，checkbox就已经能够足够满足我们的要求，但往往对于大数据量可能需要通过表格来实现选择。场景：对数据表格中数据进行选取，然后保存的数据操作。不过需要指定行的key，我们可以在。下面提供分页多选且赋初始选中的方案。
el-table 翻页后保留所勾选项
weixin_46677214的博客
11-15 4267
el-table 翻页后保留所勾选项 前言 在本周的开发中，碰到一个表格翻页之后，仍然保留所勾过的选项的功能。在原组件中，并没有这样的功能，所以经过查找分析，就有了下面的一个例子，分析给大家。 思路 查找资料后可得 为了实现保留的功能，所以需要存储勾选内容的数组（selectedItems） 通过el-table中的toggleRowSelection方法，可以设置行的选中状态。 通过el-table中的select和select-all获得勾选或者取消的内容 步骤 表格勾选 表格单选 因为翻页之后，
el-table page翻页后保留所勾选项。
qq_44978498的博客
02-16 545
el-table page翻页后保留所勾选项。
el-table分页保留勾选的数据
weixin_42375707的博客
05-27 3633
目前选中了5条数据点击下方切换分页，选中的数据消失了。
el-table实现分页切换后还能继续保持之前的勾选状态
博客简介
07-06 1619
el-table实现表格分页后还能继续保持勾选并且序号实现累加
elementui el-table表格实现跨页(翻页)保存勾选状态(后端分页)
树上骑个猴的博客
12-23 6479
思路：后端分页导致每一页之间的勾选状态都是独立的，我们需要新建一个数组来保存这些被勾选数据的id，当切换到某个页码时，从数组中进行比对，如果当前页码有待勾选的id，则用代码让当前页码的数据勾选起来。 注意： 不要使用row-key 和 reserve-selection 。否则导致自己管理的勾选状态与el-table自身保存的勾选状态互相冲突，导致状态难以管理。我们的目的是，表格的勾选状态均由代码来控制 提示： 本文代码仅包含关键代码，用于提供思路，无法直接运行使用。 第一步: 给el-table添加.
vue el-table前端 file-saver 导出excel可导出分页数据.zip
12-11
亲测 vue el-table前端使用file-saver组件，导出excel ,可导出分页数据，里面有详细步骤
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 el[email protected]，使用前请熟悉：el[email protected]el[email protected]安装npm install --save el-table-infinite-...
vue修改Element的el-table样式的4种方法
10-14
主要介绍了vue修改Element的el-table样式的4种方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
vue中使用el-table组件进行分页多选，回显、切换分页记住上一页所勾选和取消的选项
热门推荐
ThisEqualThis的博客
06-23 1万+
需求： 1、table表格多选，并且切换分页之后能记住上一页的选项； 2、回显数据，切换分页之后再切换回来依然能回显数据； 3、点击选项，未保存数据，切换页面后再切换回来初始化数据勾选状态； 4、全选，取消全选数据正常变化。 5、使用了dialog来显示table； 6、后台分页。 使用el-table： 1、el-table方法：select和select-all 、toggleRowSelection和clearSelection 2、el-table-column类型：type="selection"
利用elementui的el-table实现跨页保存单击勾选状态和全选状态（在前端分页）
树上骑个猴的博客
07-31 4079
思路: 从接口获取全部数据，前端完成分页数据展示，让el-table跨页保存单击勾选状态，让el-table跨页保存全选状态。 第一步 前端分页，从接口获取全部数据，所以不要给后端传递page和rows参数 第二步 用slice分割当前页码要显示的数据 代码： :data="tableData.slice((currentPage[customerCode]-1)*pagesize[customerCode],currentPage[customerCode]*pagesize[customerCode
el-table翻页记忆勾选
bigbigpigsobig的博客
03-10 761
element ui 表格翻页记忆勾选简单实现
el-table中选择框在分页的时候保持选中状态
weixin_58442608的博客
10-11 616
el-table中选择框在分页的时候保持选中状态。
el-table翻页后保持数据勾选
02-22
在使用 Element UI 的 el-table 组件进行翻页时，如果需要保持数据的勾选状态，可以通过以下步骤实现： 1. 在数据源中添加一个字段来保存勾选状态，例如可以在每个数据对象中添加一个名为 `checked` 的属性。 2. 在 el-table 的列定义中，使用 `selection` 类型的列来显示勾选框，并绑定到数据对象的 `checked` 属性上。 3. 在 el-table 的 `@selection-change` 事件中，更新数据对象的 `checked` 属性。 4. 在 el-table 的 `@current-change` 事件中，记录当前页选中的数据对象。 5. 在翻页时，将当前页选中的数据对象保存下来，并在下一页加载完成后重新勾选这些数据。 下面是一个示例代码： ```html <template> <el-table :data="tableData" @selection-change="handleSelectionChange" @current-change="handleCurrentChange" ref="table" > <el-table-column type="selection"></el-table-column> <!-- 其他列定义 --> </el-table> </template> <script> export default { data() { return { tableData: [], // 数据源 selectedData: [], // 当前页选中的数据 }; }, methods: { handleSelectionChange(selection) { // 更新数据对象的 checked 属性 this.tableData.forEach((item) => { item.checked = selection.includes(item); }); }, handleCurrentChange(currentRow) { // 记录当前页选中的数据 this.selectedData = currentRow.filter((item) => item.checked); }, // 翻页时重新勾选数据 handlePageChange() { this.$nextTick(() => { this.$refs.table.toggleRowSelection(this.selectedData); }); }, }, watch: { // 监听翻页事件 currentPage(newPage, oldPage) { if (newPage !== oldPage) { this.handlePageChange(); } }, }, }; </script> ``` 这样，当你在 el-table 中进行翻页操作时，勾选的数据将会被保持，并在下一页加载完成后重新勾选。注意，上述代码仅为示例，具体实现可能需要根据你的业务需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值