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.mzph.cn/news/707444.shtml

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

相关文章

使用pytorch实现一个线性回归训练函数

使用sklearn.dataset 的make_regression创建用于线性回归的数据集 def create_dataset():x, y, coef make_regression(n_samples100, noise10, coefTrue, bias14.5, n_features1, random_state0)return torch.tensor(x), torch.tensor(y), coef 加载数据集,并拆分…

shader学习记录——融合、融球效果

融合、融球效果shader,重点在等势面公式上 Shader "Custom/MetaballsShader" {Properties{_MainTex ("Texture", 2D) "white" {}_Color("Color",Color) (1,1,1,1)}SubShader{Tags { "RenderType""Opaque…

开源软件:引领技术革新,塑造行业未来

开源软件的影响力 随着信息技术的快速发展,开源软件已经成为软件开发的趋势,并产生了深远的影响。开源软件的低成本、可协作性和透明度等特点,使得越来越多的企业和个人选择使用开源软件,促进了软件行业的繁荣。然而,…

什么是光谱共焦位移传感器?揭秘它隐藏的5大优势!

光谱共焦位移传感器是一种先进的传感技术,它利用光学原理来精确测量物体表面的微小位移。这种传感器结合了光谱学和共焦显微术的原理,通过分析反射光的光谱特性来确定物体表面的位置。 光谱共焦传感器的核心部件是光谱仪,它能够将反射光分解成…

【MQL】扩充Comment函数的功能

一、MQL语言中Comment函数的缺陷 Comment函数只能在图表上显示文本信息,无法将信息输出到日志文件或其他位置。Comment函数的文本信息会随着新的新的信息出现而更新,这可能导致就的信息被覆盖。Comment函数的文本信息长度有限,超过一定长度的…

代码随想录算法训练营Day44 | 完全背包理论基础、518.零钱兑换 II、377.组合总和 Ⅳ

完全背包理论基础 完全背包看起来复杂不少,但其代码和0-1背包几乎没啥差别,就只改变了一个背包的遍历顺序: 基于0-1背包的滚动数组实现,将 j 的遍历顺序改为从左到右(此时物品会被重复使用) 完全背包的重点…

5,水平百叶窗和垂直百叶窗

将宽度设置为若干份,开始显示时若干个起始线,每个起始线间隔相同的距离。显示过程中,每次各个起始线同时向下(或向右)显示一行(或一列)图像,直到图像显示完毕。 void CMy1_showbitm…

哪个牌子的电视盒子好用?2024超强电视盒子排名

最近很多朋友问我电视盒子的相关问题,就目前来说,电视盒子的地位依然是不可取代的。我近来要发布的测评内容是哪个牌子的电视盒子好用,耗时两周进行对比后整理了电视盒子排名,看看哪些电视盒子是最值得入手的吧。 NO.1——泰捷新品…

react-组件基础

1.目标 能够使用函数创建组件 能够使用class创建组件 能够给React元素绑定事件 能够使用state和setState() 能够处理事件中的this指向问题 能够使用受控组件方式处理表单 2.目录 React组件介绍 React组件的两种创建方式 React事件处理 有状态组件和无状态组件 组件中的state…

我在代码随想录|写代码Day27 | 贪心算法 | 122.买卖股票的最佳时机 II,55. 跳跃游戏, 45.跳跃游戏 II

&#x1f525;博客介绍&#xff1a; 27dCnc &#x1f3a5;系列专栏&#xff1a; <<数据结构与算法>> << 算法入门>> << C项目>> &#x1f3a5; 当前专栏: <<数据结构与算法>> 专题 : 数据结构帮助小白快速入门算法 &…

【文献管理】zotero插件5——在word中引用参考文献文献样式修改

文章目录 word快速引用参考文献参考文献样式修改GB7714-修改etal word快速引用参考文献 参考文献样式修改 GB7714-修改etal

什么是上采样和下采样

文章目录 前言一、上采样&#xff08;Upsampling&#xff09;二、下采样&#xff08;Downsampling) 前言 在卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;中&#xff0c;下采样和上采样是指特征图的空间尺寸变化操作。 一、上采样&#x…

获取URL中的参数

在现实生活中&#xff0c;我们处处使用URL&#xff0c;但是&#xff0c;对于其中的数据&#xff08;参数&#xff09;&#xff0c;我们该如何获取呢&#xff1f;&#xff1f;这就值得我们深思了&#xff01; 在本文&#xff0c;笔者主要向大家讲解用Java语言的Spring Boot项目…

WEB服务器-Tomcat(黑马学习笔记)

简介 服务器概述 服务器硬件 ● 指的也是计算机&#xff0c;只不过服务器要比我们日常使用的计算机大很多。 服务器&#xff0c;也称伺服器。是提供计算服务的设备。由于服务器需要响应服务请求&#xff0c;并进行处理&#xff0c;因此一般来说服务器应具备承担服务并且保障…

华为OD机试真题-最长子字符串的长度(一)-2023年OD统一考试(C卷)---Python3--开源

题目&#xff1a; 考察内容&#xff1a; 思路转化&#xff1a;求出o字母出现偶次&#xff08;o的索引&#xff09;&#xff1b;环形–双倍字母&#xff1b; 方法1&#xff1a;循环变量双倍字母&#xff08;保证环线&#xff09;&#xff0c;记录最大偶次&#xff0c;如果是&a…

速盾:cdn服务器怎么做

CDN&#xff08;Content Delivery Network&#xff09;即内容分发网络&#xff0c;是一种通过将内容&#xff08;如网页、图片、视频等&#xff09;缓存到离用户较近的服务器上&#xff0c;以提升用户访问速度和减轻源服务器负载的解决方案。在CDN中&#xff0c;CDN服务器是承担…

跟着cherno手搓游戏引擎【27】升级2DRenderer(添加旋转)

水节&#xff0c;添加了旋转的DrawQuad&#xff1a; Renderer2D.h: #pragma once #include "OrthographicCamera.h" #include"Texture.h" namespace YOTO {class Renderer2D{public://为什么渲染器是静态的&#xff1a;static void Init();static void …

【Flink精讲】Flink单机安装步骤

Flink单机安装步骤 获取Flink安装包&#xff1a;Index of /flink 解压缩&#xff1a;tar -zxvf flink-1.17.2-bin-scala_2.12.tgz 修改配置文件&#xff1a;conf/flink-conf.yaml 启动命令&#xff1a;./bin/start-cluster.sh 终止命令&#xff1a;./bin/stop-cluster.s…

【视频编码\VVC】帧间预测编码基础知识

帧间预测编码概述 基本原理 利用时间相关性&#xff0c;使用邻近已编码图像像素值预测当前图像的像素值&#xff0c;能够有效去除时域冗余。目前的视频编码标准中&#xff0c;帧间预测都采用了基于块的运动补偿技术。 运动估计&#xff08;ME&#xff09;&#xff1a;当前图…

2024程序员进阶宝典,字节跳动+腾讯+华为+小米+阿里面试题分享

1、拓宽知识面 兴趣来了挡也挡不住&#xff01;从最初开始学习编程&#xff0c;从ASP到ASP.net,JS,Winform,Java,C,PHP,Python,都是自学&#xff01; 不过这里要说一下&#xff0c;如果没有一两门编程语言比较熟悉的情况下&#xff0c;最好还是不要自学&#xff1b;入门是最难…