element plus e-table表格中使用多选,当翻页时已选中的数据丢失

在这里插入图片描述摘要:

点击第一页选中两个,再选择第二页,选中,回到第一页,之前选中的要保留!

在这里插入图片描述
element ui table

解决办法: :row-key=“getRowKeys” (写在el-table中)

methods中声明 getRowKeys()方法 
getRowKeys(row) {return row.id
},

:reserve-selection=“true” (写在el-table-column中type为select的行中)

<el-table-column type="selection" :reserve-selection="true" width="44px" />

因为表格分页,点击会刷新第一页的数据的,只会加载第二页的数据,前面页面的数据是拿不到的,上面的还是不行的话加入@selection-change,当选择项发生变化时会触发该事件回调selection!

终极方法:
使用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);}})}
})

或者获取所有数据回来就更加好处理了!记录选中的,但是最傻了!

mounted(){init()
},
async init(){await setCheck()await getTableList()
},
// 这里是请求接口获取表格分页数据
getTableList(){// this.tableList = 
},
// 这里获取所有的数据
getAllTableList(){// 请求获取所有的数据,然后return出去// return allList
},
// 设置选中
async setCheck() {const allTableList = await getAllTableList()allTableList.forEach((item) => {if(ids.has(item.id)){this.$refs.elTable.toggleRowSelection(item, true)}})
}

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

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

相关文章

Spring Boot项目中怎么设置内容安全策略Content Security Policy

内容安全策略&#xff08;CSP&#xff0c;Content Security Policy&#xff09; 是一种用于防止跨站点脚本攻击&#xff08;XSS&#xff09;和数据注入攻击的安全策略。它通过指定允许加载的资源类型&#xff08;如脚本、样式表、图像等&#xff09;和其来源&#xff0c;来减少…

Python爬虫之小白入门保姆级教程,带7个爬虫小案例(附源码)!

以下是一份 Python 爬虫入门保姆级教程&#xff1a; 一、准备工作 安装 Python 前往 Python 官方网站&#xff08;https://www.python.org/&#xff09;下载适合你操作系统的 Python 版本并安装。安装过程中可以勾选“Add Python to PATH”以便在命令行中方便地调用 Python。 …

初识git · 有关模型

目录 前言&#xff1a; 有关开发模型 前言&#xff1a; 其实文章更新到这里的时候&#xff0c;我们已经学习了可以满足我们日常生活中的基本需求的指令了&#xff0c;但是为什么要更新本篇文章呢&#xff1f;是因为实际生活中我们对于开发工作&#xff0c;运维工作&#xff…

ubuntu查看系统版本命令

查看系统版本指令 在 Ubuntu 操作系统中&#xff0c;您可以使用多个命令来查看系统版本。以下是一些常用的命令&#xff1a; lsb_release -a 这个命令会显示详细的 Ubuntu 版本信息&#xff0c;包括发行版名称、版本号、代号等。lsb_release -acat /etc/os-release 这个命令会显…

基于SSM的的水电管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

5G工业路由器智能电网部署实录:一天内解决供电、网络

凌晨4:13,我被手机震动惊醒。变电站值班人员发来紧急消息:昨晚部署的SR800突然离线。我立即查看了STAR Device Manager平台,确认是设备A37号在3:47分失去连接。(key-iot.com/iotlist/sr800-3.html) 6:30到达变电站。检查SR800状态,发现是供电问题导致设备重启。这个老旧变电站…

pytorch训练和使用resnet

pytorch训练和使用resnet 使用 CIFAR-10数据集 训练 resnet resnet-train.py import torch import torchvision import torchvision.transforms as transforms import torch.nn as nn import torch.optim as optim# 在CIFAR-10数据集中 # 训练集&#xff1a;包含50000张图像…

电影院订票选座小程序ssm+论文源码调试讲解

第2章 开发环境与技术 电影院订票选座小程序的编码实现需要搭建一定的环境和使用相应的技术&#xff0c;接下来的内容就是对电影院订票选座小程序用到的技术和工具进行介绍。 2.1 MYSQL数据库 本课题所开发的应用程序在数据操作方面是不可预知的&#xff0c;是经常变动的&…

处理文件上传和进度条的显示(进度条随文件上传进度值变化)

成品效果图&#xff1a; 解决问题&#xff1a;上传文件过大时&#xff0c;等待时间过长&#xff0c;但是进度条却不会动&#xff0c;只会在上传完成之后才会显示上传完成 上传文件的upload.component.html <nz-modal [(nzVisible)]"isVisible" [nzTitle]"文…

python包以及异常、模块、包的综合案例(较难)

1.自定义包 python中模块是一个文件&#xff0c;而包就是一个文件夹 有这个_init_.py就是python包&#xff0c;没有就是简单的文件夹 包的作用&#xff1a;当我们的模块越来越多时&#xff0c;包可以帮助我们管理这些模块&#xff0c;包的作用就是包含多个模块&#xff0c;但包…

【命令操作】信创终端系统上timedatectl命令详解 _ 统信 _ 麒麟 _ 方德

原文链接&#xff1a;【命令操作】信创终端系统上timedatectl命令详解 | 统信 | 麒麟 | 方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于如何在信创终端系统上使用timedatectl命令的详细介绍。timedatectl 是Linux系统中非常实用的时间管理工具&#xff0c;…

学习写作--polyGCL.md

POLYGCL: GRAPH CONTRASTIVE LEARNING VIA LEARNABLE SPECTRAL POLYNOMIAL filters 这篇工作的摘要和引言写的特别好&#xff08;不愧是ICLR spotlight&#xff09; 摘要 第一步&#xff0c;设定背景 Recently, Graph Contrastive Learning (GCL) has achieved significantl…

使用Flask实现本机的模型部署

前言 模型部署是指将大模型运行在专属的计算资源上&#xff0c;使模型在独立的运行环境中高效、可靠地运行&#xff0c;并为业务应用提供推理服务。其目标是将机器学习模型应用于实际业务中&#xff0c;使最终用户或系统能够利用模型的输出&#xff0c;从而发挥其作用。 一、设…

12 django管理系统 - 注册与登录 - 登录

为了演示方便&#xff0c;我就直接使用models里的Admin来演示&#xff0c;不再创建用户模型了。 ok&#xff0c;先做基础配置 首先是在base.html中&#xff0c;新增登录和注册的入口 <ul class"nav navbar-nav navbar-right"><li><a href"/ac…

黑马软件测试第一篇_Linux

Linux 操作系统 说明: 所有硬件设备组装完成后的第⼀一层软件, 能够使⽤用户使⽤用硬件设备的软件 即为操作系统 常见分类 桌⾯面操作系统: Windows/macOS/Linux移动端操作系统: Android(安卓)/iOS(苹果)服务器器操作系统: Linux/Windows Server嵌⼊入式操作系统: Android(底…

linux线程 | 同步与互斥 | 线程池以及知识点补充

前言&#xff1a;本节内容是linux的线程的相关知识。本篇首先会实现一个简易的线程池&#xff0c; 然后再将线程池利用单例的懒汉模式改编一下。 然后再谈一些小的知识点&#xff0c;比如自旋锁&#xff0c; 读者写者问题等等。 那么&#xff0c; 现在开始我们的学习吧。 ps:本…

吴恩达深度学习笔记(6)

正交化 为了提高算法准确率&#xff0c;我们想到的方法 收集更多的训练数据增强样本多样性使用梯度下降将算法使算法训练时间更长换一种优化算法更复杂或者更简单的神经网络利用dropout 或者L2正则化改变网络框架更换激活函数改变隐藏单元个数 为了使有监督机制的学习系统良…

ansible playbooks

文章目录 一&#xff0c;ansible剧本二&#xff0c;ansible playbooks主要特性三&#xff0c;yaml基本语法规则四&#xff0c;剧本playbooks的组成结构五&#xff0c;yaml编写1.示例2.运行playbook2.1 运行2.2 检查yaml文件的语法是否正确2.3 检查tasks任务2.3 检查生效的主机2…

maven创建父子项目

创建父类 创建子模块 添加文件夹 配置tomcat 参考 然后启动项目即可 参考 https://blog.csdn.net/gjtao1130/article/details/115000022

Linux——shell 编程基础

基本介绍 shell 变量 环境变量&#xff08;也叫全局变量&#xff09; 位置参数变量 预定义变量 运算符 条件判断 流程控制 if 单分支&多分支 case 语句 for循环 while 循环 read 读取控制台输入 函数 系统函数 basename 获取文件名 dirname 获取目录路径 自定义函数 综…