iview Table实现跨页勾选记忆功能以及利用ES6的Map数据结构实现根据id进行对象数组的去重

因为iview Table组件的勾选是选中当前页的所有数据,当我们切到别的页面时,会发送请求给后端,这个时候就会刷新我们之前页码已经选中的数据。现在有个需求就是,在我们选择不同页码的数据勾选中之后,实现跨页勾选记忆功能,就是说已经打钩了的数据,不管切到哪一页它都是打钩状态。效果如下,第一页勾了10条,第二页勾了2条,第三页勾了1条:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实现思路就是Table组件的columns里配置 type: "selection"开启勾选功能,然后利用 **@on-selection-change=“onSelectChange” @on-select-cancel=“onSelectCancel”**这两个方法,
这里我封装了一个去重方法deWeightThree,它可以根据对象数组里id进行去重。onSelectChange方法里如果val有值表示勾选中了某一条,否则就是取消全选当前页的数据。我们在data里定义了一个数组selectArr,用于存储我们当前所有页面已经选中打钩的数据。getTableData_new获取当前页table数据,需注意的是在我们调获取当前页table数据的接口成功后&

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

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

相关文章

AI聊天专题报告:ChatGPT全景图聊聊技术产品和未来

今天分享的AI系列深度研究报告:《AI聊天专题报告:ChatGPT全景图聊聊技术产品和未来》。 (报告出品方:LanguageX) 报告共计:22页 争论:ChatGPT算不算技术革命 回应吴军老师“ChatGPT不算新技术…

Navicat 技术指引 | 适用于 GaussDB 分布式的模型功能

Navicat Premium(16.3.3 Windows 版或以上)正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能,还提供强大的高阶功能(如模型、结…

cache 2.单机并发缓存

0.对原教程的一些见解 个人认为原教程中两点知识的引入不够友好。 首先是只读数据结构 ByteView 的引入使用是有点迷茫的,可能不能很好理解为什么需要ByteView。 第二是主体结构 Group的引入也疑惑。其实要是熟悉groupcache,那对结构Group的使用是清晰…

QT作业2

使用手动连接,将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中,在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中,在槽函数中判断ui界面上输入的账号是否为"admin",密码是否为…

Navicat 技术指引 | 适用于 GaussDB 分布式的数据查看器

Navicat Premium(16.3.3 Windows 版或以上)正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能,还提供强大的高阶功能(如模型、结…

微服务学习:Nacos微服务架构中的服务注册、服务发现和动态配置Nacos下载

Nacos的主要用途包括: 服务注册与发现:Nacos提供了服务注册和发现的功能,服务提供者可以将自己的服务注册到Nacos服务器上,服务消费者则可以通过Nacos来发现可用的服务实例,从而实现服务调用。 动态配置管理&#xff…

聚观早报 |华为畅享 70正式开售;梦饷科技双12玩法

【聚观365】12月8日消息 华为畅享 70正式开售 梦饷科技双12玩法 华为Mate X5应对火海挑战 谷歌发布AI模型Gemini 字节跳动开启新一轮回购 华为畅享 70正式开售 精致外观与创新科技兼具的华为畅享 70正式开售,1199元起搭载6000mAh超大电池,带来超强…

机器视觉相机镜头光源选型

镜头选型工具 - HiTools - 海康威视 Hikvisionhttps://www.hikvision.com/cn/support/tools/hitools/cl8a9de13648c56d7f/ 海康机器人-机器视觉产品页杭州海康机器人股份有限公司海康机器人HIKROBOT是面向全球的机器视觉和移动机器人产品及解决方案提供商,业务聚焦于…

Navicat 技术指引 | 适用于 GaussDB 分布式的数据生成功能

Navicat Premium(16.3.3 Windows 版或以上)正式支持 GaussDB 分布式数据库。GaussDB 分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能,还提供强大的高阶功能(如模型、结…

GPTs的创建与使用,自定义GPTs中的Actions示例用法 定义和执行特定任务的功能模块 通过API与外部系统或服务的交互

Name 等 Logo:自动生成 Name 介绍 Description 介绍 Instructions 要求或命令等 比如用中文回复,角色。 Knowledge 上传你的知识库,如果你有某一垂直行业的数据,基于数据来回答。比如我有某个芯片的指令集。 Capabilities 都要 Actions&…

Flink 使用场景

Apache Flink 功能强大,支持开发和运行多种不同种类的应用程序。它的主要特性包括:批流一体化、精密的状态管理、事件时间支持以及精确一次的状态一致性保障等。Flink 不仅可以运行在包括 YARN、 Mesos、K8s 在内的多种资源管理框架上,还支持…

vue3递归组件---树形组件

第一种方式&#xff0c;直接自己调用自己 Tree.vue <template><div class"tree"><div v-for"(item, index) in data" :key"item.name">每一层 {{ item.name }}<Tree v-if"item?.children?.length" :dataitem…

AGM离线下载器使用说明

AGM专用离线下载器示意图&#xff1a; 供电方式&#xff1a; 通过 USB 接口给下载器供电&#xff0c;跳线 JP 断开。如果客户 PCB 的 JTAG 口不能提供 3.3V 电源&#xff0c;或仅需烧写下载器&#xff0c;尚未连接用户 PCB 时&#xff0c;采用此种方式供电。 或者&#xff1a…

Linux中的网络时间服务器

本章主要介绍网络时间的服务器 使用chrony配置时间服务器配置chrony客户端服务器同步时间 1.1 时间同步的重要性 一些服务对时间要求非常严格&#xff0c;例如如图所示的由三台服务器搭建的ceph集群 这三台服务器的时间必须保持一致&#xff0c;如果不一致&#xff0c;就会显…

Django讲课笔记01:初探Django框架

文章目录 一、学习目标二、课程导入&#xff08;一&#xff09;课程简介&#xff08;二&#xff09;课程目标&#xff08;三&#xff09;适用人群&#xff08;四&#xff09;教学方式&#xff08;五&#xff09;评估方式&#xff08;六&#xff09;参考教材 三、新课讲授&#…

android项目实战之编辑器集成

引言 项目需要用到编辑器&#xff0c;采用RichEditor&#xff0c;如下效果 实现 1. 引入库2 implementation jp.wasabeef:richeditor-android:2.0.0 2. XML <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width&q…

如何使用 Wordpress?托管, 网站, 插件, 缓存

这是该系列教程的第一个教程&#xff0c;最终将在运行高性能 LEMP 堆栈的阿里云 ECS 实例上运行一个新的 WordPress 站点。 在本教程中&#xff0c;我们将创建一个运行 Ubuntu 16.04 的实例&#xff0c;然后通过创建超级用户并禁用 root 登录来保护服务器&#xff0c;最后配置…

持续集成交付CICD:使用Maven命令下载Nexus制品

目录 一、实验 1.Maven安装 2.Nexus搭建公共组仓库及Maven全局配置文件 3.使用Maven命令下载Nexus制品 一、实验 1.Maven安装 &#xff08;1&#xff09;CentOS环境安装步骤 tar -xf apache-maven-3.8.6-bin.tar.gz #解压 mv apache-maven-3.8.6 /usr/local/maven #移动…

如何进行更好的面试回复之缓存函数在项目中的性能优化?

缓存函数是一种提高函数性能的技术&#xff0c;在函数被调用时&#xff0c;会将计算结果缓存起来&#xff0c;以便在后续的调用中直接返回缓存的结果&#xff0c;从而减少了重复计算的时间。 缓存函数的实现通常包括两个步骤&#xff1a; 判断缓存是否存在&#xff1a;在函数被…

理解传统模式与互联网时代 消费行为模型 AIDMA , AISAS , SICAS

1 AIDMA与AISAS 消费行为模型&#xff0c;以及所诞生的IT岗位 1.1 传统市场营销消费行为模型 AIDMA模型&#xff1a;Attention&#xff08;吸引&#xff09;&#xff0c;Interest &#xff08;兴趣&#xff09;&#xff0c;Desire&#xff08;欲望&#xff09; &#xff0c;Me…