el-table 多选表格存在分页,编辑再次操作勾选会丢失原来选中的数据

el-table表格多选时,只需要添加type="selection"row-key@selection-change,如果存在分页时需要加上reserve-selection,这里就不写具体的实现方法了,可以查看我之前的文章,这篇文章主要说一下存在的问题。

问题:

1.进入列表,勾选表格第1页的一条数据,然后切换进入第2页,再勾选一条数据
在这里插入图片描述

在这里插入图片描述
如上图,每页分别勾选了一条数据,然后保存

2.再点击编辑,进入后,不要点击第二页,直接在第一页上在勾选一条数据,然后保存,你会发现,第二页的数据消失了。如果先点击切换进入第二页,再点击保存就没问题了

疑问:这是什么情况,为什么会这样呢?

因为表格是存在分页,初始化进去的时候,只加载了第一页的数据,后面页面的数据是拿不到的,el-table组件只会存第一页选中的,当你点击一下第二页的时候,@selection-change的参数就正常了

如果解决

那肯定是有方法解决的,使用toggleRowSelection方法把数据硬塞进去

this.$nextTick(() => {// this.multipleSelection:第一页和第二页选中的数据数组, this.tableList是表格数据if (this.multipleSelection.length) {// this.$refs.elTable 当前表格refthis.$refs.elTable.clearSelection()this.multipleSelection.forEach(row => {const selectedRow = this.tableList.find(item => item.id === row.id)if(selectedRow){// 当前页(第一页)需要被选中的数据使其选中this.$refs.elTable.toggleRowSelection(selectedRow, true);}else{// 不在当前页(第二页)的数据,也硬塞到@selection-change的参数中,这时当你在第一页选中其他数据时,selection-change的参数也会带着第二页的数据this.$refs.elTable.toggleRowSelection(row, true);}})}
})

这里使用了vue2的代码解释,如果需要vue3的直接修改即可,原理一样的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/495988.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CGI程序与ShellShock漏洞

CGI是什么? CGI(通用网关接口,Common Gateway Interface)程序是一种用于在Web服务器上执行动态内容的技术。与服务器上普通的后端代码相比,CGI程序有几个区别: 执行环境: CGI程序在服务器上作为…

开创5G无线新应用:笙科电子5.8GHz 射频芯片

笙科电子(AMICCOM) 5.8GHz A5133射频芯片是一款专门设计用于在5.8GHz频率范围内(5725MHz - 5850MHz)进行射频信号处理的集成电路。这些集成电路通常包括各种功能模块,如射频前端、混合器、功率放大器、局部振荡器等,以支持无线通信系统的各种…

数据结构2月21日

双向链表: func函数&#xff1a; #include <stdio.h> #include <stdlib.h> …

【盲源分离】快速理解FastICA算法(附MATLAB绘图程序)

今天讲一个在信号分析领域较为常用的一个方法&#xff0c;即盲源分离算法中的FastICA。 我们先从一个经典的问题引入。 一、鸡尾酒舞会问题 想象一下&#xff0c;你身处一个熙熙攘攘的鸡尾酒舞会中。四周回荡着各种声音&#xff1a;笑声、交谈声、玻璃碰撞声&#xff0c;甚至…

Hybird App开发,纯血鸿蒙系统快速兼容救星

2024年1月18日的开发者&#xff08;HDC&#xff09;大会上&#xff0c;就官宣了“纯血鸿蒙”操作系统即将于2024年3季度正式投产。与此同时&#xff0c;支付宝、京东、小红书、微博、高德地图、中国移动等在内的超百个头部应用都启动了鸿蒙原生应用开发&#xff0c;鸿蒙开发者日…

Flink CDC 提取记录变更时间作为事件时间和 Hudi 表的 precombine.field 以及1970-01-01 取值问题

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

【QT+QGIS跨平台编译】之五十四:【QGIS_CORE跨平台编译】—【qgssqlstatementlexer.cpp生成】

文章目录 一、Flex二、生成来源三、构建过程一、Flex Flex (fast lexical analyser generator) 是 Lex 的另一个替代品。它经常和自由软件 Bison 语法分析器生成器 一起使用。Flex 最初由 Vern Paxson 于 1987 年用 C 语言写成。 “flex 是一个生成扫描器的工具,能够识别文本中…

Java Web(十)--jQuery

介绍 官网文档&#xff1a;jQuery 教程 jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm 下载地址&#xff1a;https://jquery.com/download/%20jQuery jQuery 是一个快速的&#xff0c;简洁的 javaScrip工具库&#xff0c;使用户能更方…

Mycat核心教程--Mycat 监控工具【四】

Mycat核心教程--Mycat 监控工具 九、Mycat 监控工具9.1.Mycat-web 简介9.2.Mycat-web 配置使用9.2.1.ZooKeeper 安装【上面有】9.2.2.Mycat-web 安装9.2.2.1.下载安装包9.2.2.2.安装包拷贝到Linux系统/opt目录下&#xff0c;并解压9.2.2.3.拷贝mycat-web文件夹到/usr/local目录…

C#理论 —— WPF 应用程序Console 控制台应用

文章目录 1. WPF 应用程序1.1 工程创建1.2 控件1.2.1 控件的公共属性1.2.1 TextBox 文本框1.2.1 Button 按钮 *. Console 控制台应用1.1 工程创建 1. WPF 应用程序 1.1 工程创建 Visual Studio 中新建项目 - 选择WPF 应用程序&#xff1b; 1.2 控件 1.2.1 控件的公共属性 …

测试开发(6)软件测试教程——自动化测试selenium(自动化测试介绍、如何实施、Selenium介绍 、Selenium相关的API)

接上次博客&#xff1a;测试开发&#xff08;5&#xff09;测试分类标准 &#xff1a;按测试对像划分、按是否查看代码划分、按开发阶段划分、按测试实施组织、按是否运行划分、按是否手工划分、按测试地域划分-CSDN博客 目录​​​​​​​ 什么是自动化测试 自动化测试介绍…

单晶银粉在光伏发电和电子电气领域需求旺盛 我国市场国产化进程有望加快

单晶银粉在光伏发电和电子电气领域需求旺盛 我国市场国产化进程有望加快 单晶银粉指以单晶形式存在的银材料。与普通银粉相比&#xff0c;单晶银粉具有化学稳定性好、光学透过率高、导电性佳、导热性好、易于加工、纯度高等优势&#xff0c;在光伏发电、电子电气等领域拥有广阔…