el-table多选分页回显

el-table多选分页回显

1.多选项添加 :reserve-selection="true"
<el-table-column type="selection" align="center" width="55" :reserve-selection="true"
></el-table-column>

reserve-selection : 仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key

2.设置参数记录已选项selectedList
3.设置el-table的selection-change事件:取消或者选择就会触发该事件
需要考虑:
  1. 在某一页时,第一次选择一项,第二次全选当页,已选项中已存在的某一项不再添加
  2. 先选择一项时,再全选,在取消全选,要删除取消已选项

**注意:**因为做了分页,对于全选和取消全选,都是本页数据的全选,

   //这里的brmOrderId就是row-key,要确保其唯一性//tableDataList 表示本页的数据handleSelectionChange(rows) {// 不存在就添加进去rows.forEach(row => {if (!this.selectedList.some(item => item.brmOrderId === row.brmOrderId)) {this.selectedList.push(row)}});// list是此页中未选项,对于那些选择,再取消的项,需要在selectedList中删除const list = []this.tableDataList.forEach(item => {if (!rows.some(row => row.brmOrderId === item.brmOrderId)) {list.push(item)}});list.forEach(item => {const index = this.selectedList.findIndex(selectIndex => selectIndex.brmOrderId === item.brmOrderId)if (index !== -1) {this.selectedList.splice(index, 1)}})},
4.选项回显

**场景:**在第一页中选择了一项,切换到第二页全选,再切换为第一页,要勾选第一页的已选项

**实现:**在获取当前页面数据的时候,与selectedList中的数据对比,如果有已选项,就勾选

代码:

    // rows是selectedList; tableDataList当前页接口返回的数据toggleSelection(rows) {this.$nextTick(() => {setTimeout(() => {if (rows && this.tableDataList.length !== 0) {this.tableDataList.forEach((dataItem) => {rows.forEach(item => {if (item.brmOrderId === dataItem.brmOrderId) {// toggleRowSelection是勾选 表中符合要求的选项this.$refs.projectTables.toggleRowSelection(dataItem, true)}})})} else {// 清空用户的选择this.$refs.projectTables.clearSelection();}}, 0);});}

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

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

相关文章

浅谈配置元件之Java默认请求

浅谈配置元件之Java默认请求 1.简介 “Java默认请求”&#xff08;虽然直接名为"Java Request"更常见&#xff09;是一个高级配置元件&#xff0c;它允许用户通过Java代码自定义请求逻辑&#xff0c;为测试提供了极高的灵活性和扩展性。 2.Java请求组件概述 在JM…

Ubuntu/Linux系统安装JDK1.8(带jdk1.8资源和操作教程)

文章目录 前言一、JDK1.8下载二、上传三、安装四、配置环境变量五、查看总结 前言 &#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;Ubuntu/Linux jdk1.8安装包&#xff…

MySQL支持哪些特殊字符

MySQL支持多种特殊字符&#xff0c;这些字符在SQL语句中具有特定的含义&#xff0c;需要在使用时特别注意。以下是一些MySQL中的特殊字符及其相关信息&#xff1a; 引号&#xff1a; 单引号&#xff08;&#xff09;&#xff1a;用于定义字符串。如果字符串中包含单引号本身&…

[BFS广搜]数字变换

描述 给定一个包含5个数字&#xff08;0-9&#xff09;的字符串&#xff0c;例如 “02943”&#xff0c;请将“12345”变换到它。 你可以采取3种操作进行变换 1. 交换相邻的两个数字 2. 将一个数字加1。如果加1后大于9&#xff0c;则变为0 3. 将一个数字加倍。如果加倍后大…

【机器学习】【深度学习】MXnet神经网络图像风格迁移学习简介

使用部分 一、编程环境 编程环境使用Windows11上的Anaconda环境&#xff0c;Python版本为3.6. 关于Conda环境的建立和管理&#xff0c;可以参考我的博客&#xff1a;【Anaconda】【Windows编程技术】【Python】Anaconda的常用命令及实操 二、项目结构&#xff08;代码非原创…

whisper fastapi 完整识别一个音频文件实现

import whisper from fastapi import FastAPI, File, UploadFile from fastapi.responses import StreamingResponse import io import torch import numpy as np from pydantic import BaseModel import os import tempfile# 加载 Whisper 模型 model whisper.load_model(&qu…

Hive期末总结

hive的概念&#xff0c;谁开发的 Apache Hive 是一个Apache 软件基金会维护的开源项目 Facebook贡献 hive是一个基于hadoop的数据仓库工具&#xff08;对数据汇总查询和分析的工具&#xff09; hive执行原理 Hive通过给用户提供的一系列交互接口&#xff0c;接收到用户的指令…

关于面试被面试官暴怼:“几年研究生白读” 的前因后果

中午一个网友来信说自己和面试官干起来了,看完他的描述真是苦笑不得,这年头是怎么了,最近互联网CS消息满天飞,怎么连面试官都SB起来了呢? 大概是这样的:这位网友面试时被问及了Serializable接口的底层实现原理,因为这是一个标识性的空接口,大部分同学在学习时都秉持着会…

【Mybatis-plus】查询及更新为null或空字符串

前言 查询为 null 或者 空字符串时&#xff0c;可以使用 or() 关键字。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 查询 使用 LambdaQueryWrapper 查询 parentCode 为 null 或者 空字符串 的数据。 LambdaQueryWrapper<CompanyEntity> qu…

使用Vue+Antv-X6实现一个输送线可视化编辑器(支持拖拽、自定义连线、自定义节点等)

最近公司有这样的业务&#xff0c;要实现一个类似流程图的编辑器&#xff0c;可以拖拉拽之类的&#xff0c;网上寻找了一番&#xff0c;最终决定使用Antv-X6这个图形引擎&#xff0c;非常强大&#xff0c;文档多看几遍也就能上手使用了。感觉还不错就写个使用心得期望能帮助到同…

React 通信:深层传递(Props、Context、Children Jsx)

在之前的文章 探讨&#xff1a;围绕 props 阐述 React 通信 中总结了关于“父子”组件传值&#xff0c;但是当需要在组件树中深层传递参数以及需要在组件间复用相同的参数时&#xff0c;传递 props 就会变得很麻烦。 实际案例&#xff1a; 下述展示有两种状态&#xff1a;① 详…

数据治理的七大核心技术 全面了解数据治理必读篇

在当今的数字化时代&#xff0c;数据已成为企业最宝贵的资产之一&#xff0c;其价值不仅体现在数据量的巨大&#xff0c;更在于数据的深度和宽度。随着大数据、云计算、物联网&#xff08;IoT&#xff09;和人工智能&#xff08;AI&#xff09;等技术的不断进步&#xff0c;企业…

Jenkins 发测试邮件报错 553 Mail from must equal authorized user

Jenkins 发测试邮件报错 553 Mail from must equal authorized user 报错信息报错原因解决办法 报错信息 org.eclipse.angus.mail.smtp.SMTPSenderFailedException: 553 Mail from must equal authorized user at org.eclipse.angus.mail.smtp.SMTPTransport.mailFrom(SMTPTra…

微信小程序端在线客服源码系统 聊天记录实时保存 带完整的安装代码包以及搭建教程

系统概述 在当今数字化时代&#xff0c;客户服务的质量和效率成为企业竞争的关键因素之一。微信小程序作为一种便捷的应用形式&#xff0c;为在线客服提供了广阔的平台。而具备聊天记录实时保存功能的微信小程序端在线客服源码系统&#xff0c;则能够更好地满足企业与客户之间…

【人机交互 复习】第8章 交互设计模型与理论

一、引文 1.模型&#xff1a; 有的人成功了&#xff0c;他把这一路的经验中可以供其他人参考的部分总结了出来&#xff0c;然后让别人套用。 2.本章模型 &#xff08;1&#xff09;计算用户完成任务的时间&#xff1a;KLM &#xff08;2&#xff09;描述交互过程中系统状态的变…

linux端口被占用 关闭端口

系列文章目录 文章目录 系列文章目录一、linux端口被占用 关闭端口1.参考链接2.具体命令 二、【linux关闭进程命令】fuser -k 和 kill -9 的区别1.参考链接2.具体命令 一、linux端口被占用 关闭端口 1.参考链接 linux端口被占用 关闭端口 2.具体命令 1.查看端口是否被占用 …

麒麟移动运行环境(KMRE)——国内首个开源的商用移固融合“Android生态兼容环境”正式开源

近日&#xff0c;由麒麟软件研发的KMRE&#xff08;Kylin Mobile Runtime Environment&#xff0c;麒麟移动运行环境&#xff09;在openKylin&#xff08;开放麒麟&#xff09;社区正式发布&#xff0c;为Linux桌面操作系统产品提供了高效的Android运行环境解决方案。这也是国内…

Nature 苏浩团队发表创新人工智能“仿真中学习”框架,实现外骨骼的智能性和通用性

北京时间2024年6月12日23时&#xff0c;美国北卡罗来纳州立大学与北卡罗来纳大学教堂山分校的苏浩团队在《自然》&#xff08;Nature&#xff09;上发表了一篇关于机器人和人工智能算法相结合服务人类的突破性研究论文&#xff0c;标题为“Experiment-free Exoskeleton Assista…

Java语法糖写法

一、函数式接口 1、Function函数式接口&#xff1a;有一个输入参数&#xff0c;有一个输出 2、断定型接口&#xff1a;有一个输入参数&#xff0c;返回值只能是布尔值&#xff01; 3、Consumer 消费型接口&#xff1a;只有输入&#xff0c;没有返回值 4、Supplier供给型接口&a…

【谷歌】实用的搜索技巧

1、使用正确的谷歌网址 我们知道https://www.google.com是谷歌的网址。但根据国家,用户可能会被重定向到 google.fr(法国)或google.co.in(印度)。 最主要的URL——google.com是为美国用户准备的(或是针对全世界所有用户的唯一URL))。当你在谷歌上搜索时,了解这一点是相…