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://xiahunao.cn/news/2815273.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

算法打卡day5|哈希表篇01|Leetcode 242.有效的字母异位词 、19.删除链表的倒数第N个节点、202. 快乐数、1. 两数之和

哈希表基础知识 哈希表 哈希表关键码就是数组的索引下标,然后通过下标直接访问数组中的元素;数组就是哈希表的一种 一般哈希表都是用来快速判断一个元素是否出现集合里。例如要查询一个名字是否在班级里: 要枚举的话时间复杂度是O(n)&…

Linux服务器中文乱码如何解决

如果服务器上数字和英文均可正常展示,只有中文是奇奇怪怪的乱码,那么可以考虑是服务器本身字体输出有问题。 如何在服务器上安装中文宋体字体库呢,排查及安装字体库步骤如下: 使用 fc-list命令检查服务器是否安装字体库如果提示…

Docker部署Portainer图形化管理工具

文章目录 前言1. 部署Portainer2. 本地访问Portainer3. Linux 安装cpolar4. 配置Portainer 公网访问地址5. 公网远程访问Portainer6. 固定Portainer公网地址 前言 Portainer 是一个轻量级的容器管理工具,可以通过 Web 界面对 Docker 容器进行管理和监控。它提供了可…

模仿蜘蛛工作原理 苏黎世联邦理工学院研发牛油果机器人可在雨林树冠穿行

对于野外环境生物监测的研究人员来讲,收集生物多样性数据已成为日常工作重要组成部分,特别是对于热带雨林的茂密树冠当中活跃着非常多的动物、昆虫与植物。每次勘察都需要研究人员爬上茂密树冠收集数据,一方面增加了数据收集难度,…

性能测试-反编译jar

方法一,使用jd-gui 1、官网下载:Java Decompiler 2、下载mac版本后,解压,如下所示: 双击 JD_GUI,提示错误,如下所示: 已经安装了java 17,是java 1.8以上版本&#xff0…

milvus upsert流程源码分析

milvus版本:v2.3.2 整体架构: Upsert 的数据流向: 1.客户端sdk发出Upsert API请求。 import numpy as np from pymilvus import (connections,Collection, )num_entities, dim 4, 3print("start connecting to Milvus") connections.connect("default",…

程序员年龄增大后的职业出路是什么?

​新年刚过,返工在即。程序员们都收到大大小小的开门红,开启今年新征程。但是有人欢喜有人忧…… 本想着2024年Android行业会好过一些,还是避免不了裁员风险。在安卓历经了10多年的发展后,因为头部公司的稳定和相互的竞争情况下&a…

猜数字游戏,炸弹数,random

package com.zhang.random;import java.util.Random; import java.util.Scanner;public class RandomTest2 {public static void main(String[] args) {//随机生成一个1~100之间的数,提示用户猜测,猜大提示猜大,猜小提示小了,直到…

LeetCode刷题——144. 二叉树的前序遍历

热身题:二叉树的前序遍历 题目描述: 题目链接:https://leetcode.cn/problems/binary-tree-preorder-traversal/description/ 递归解法: 关键点1 递归三部曲: 第一步:确定递归函数的返回值和参数列表 第…

11.vue学习笔记(组件生命周期+生命周期应用+动态组件+组件保持存活)

文章目录 1.组件生命周期2.生命周期应用2.1通过ref获取元素DOM结构2.2.模拟网络请求渲染数据 3.动态组件3.1.A,B两个组件 4.组件保持存活(销毁期) 1.组件生命周期 每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如设置…

【学习笔记】Vue3源码解析:第二部分-实现响应式(3)

课程地址:【已完结】全网最详细Vue3源码解析!(一行行带你手写Vue3源码) 第二部分-实现响应式(3):(对应课程的第10-14节) 第10节:《定义收集依赖的effect方法…

探索AI视频模型的无限可能:OpenAI的Sora引领创新浪潮

文章目录 📑前言一、技术解析二、应用场景三、未来展望四、伦理与创意五、用户体验与互动🌤️总结 📑前言 随着人工智能技术的蓬勃发展,AI视频模型正逐渐成为科技领域的新宠。在这个变革的浪潮中,OpenAI推出的首个AI视…

Web前端---图层嵌套与层叠三行三列效果

1.图层的嵌套设计 <!doctype html> <html> <head> <meta charset"utf-8"> <title>图层嵌套</title><style type"text/css">.inline_div{display:inline-block;}#wrap{width400px;height250px;border:2px solid…

Soul App发布春节特产社交报告,全面解析当代年轻人的社交新趋势

近日,社交平台Soul App发布了《2024年春节“特产社交”趋势洞察报告》,深入剖析了年轻用户在春节期间的特产消费新习惯和社交新方式。这份报告基于平台内容和2395份调研样本,重点关注18-34岁用户群体,特别是00后用户,为我们呈现了一系列有趣的趋势。 年轻人的过年选择:看世界,却…

数据卷dockerfile

目录 一、数据卷 1. 简介 2. 数据卷和数据卷容器 1. 数据卷&#xff1a; 2. 数据卷容器&#xff1a; 二、自定义镜像 1. 作用 2. 自定义centos 3. 自定义tomcat8 一、数据卷 1. 简介 数据卷是一个可供一个或多个容器使用的特殊目录&#xff0c;它将主机操作系统目录直…

【C++】拿下! C++中的内存管理

内存管理 1 C 的内存分布2 C语言的内存管理3 C的内存管理3.1 内置类型操作3.2 自定义类型操作 4 operator new与operator delete函数&#xff08;重点&#xff09;5 new和delete的实现原理5.1 内置类型5.2 自定义类型new的原理delete的原理new T[ N ] 的原理lete[]的原理 6 总结…

使用RestTemplate发送HTTP请求

文章目录 1.1 RestTemplate环境准备1&#xff09;背景说明2&#xff09;工程配置RestTemplate 1.2 RestTemplate API入门-11&#xff09;get请求携带参数访问外部url2&#xff09;get请求响应数据自动封装vo实体对象3&#xff09;请求头携带参数访问外部接口 1.3 RestTemplate …

【Linux】云服务器的Redis被黑

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Linux ⛺️稳中求进&#xff0c;晒太阳 攻击发现&#xff1a; 这个异常情况是在腾讯云被入侵后&#xff0c;短信提醒发现的。并没有系统的学习过关于服务器安防相关的知识&#xff0c;遇到…

某查查首页瀑布流headers加密

目标网站&#xff1a; 某查查 对目标网站分析发现 红框内的参数和值都是加密的&#xff0c;是根据算法算出来的&#xff0c;故进行逆向分析。 由于没有固定参数名&#xff0c;只能通过搜索headers&#xff0c;在搜索的位置上打上断点&#xff0c;重新请求。 断点在此处断住&a…

基于springboot实现鞋类商品购物商城系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现鞋类商品购物商城系统演示 摘要 时代的变化速度实在超出人类的所料&#xff0c;21世纪&#xff0c;计算机已经发展到各行各业&#xff0c;各个地区&#xff0c;它的载体媒介-计算机&#xff0c;大众称之为的电脑&#xff0c;是一种特高速的科学仪器&#xf…