当前位置: 首页 > news >正文

antd+vue——实现table组件跨页多选,已选择数据禁止第二次重复选择

需求场景:点击【新增】按钮可以在分页弹窗中跨页多选选择数据后添加到页面中,再次点击【新增】,已经选择过的数据则置灰不让重复选择。
在这里插入图片描述
选择后,置灰
在这里插入图片描述
点击【确定】数据添加到页面中,可再次点击【新增】进行添加数据
在这里插入图片描述

解决步骤1:table组件的写法

 <a-table:row-key="(r) => r.id":columns="columns":dataSource="dataSource":pagination="pagination"@change="changeTable":row-selection="rowSelection":rowClassName="rowClassNameFn"bordered:scroll="{ y: 400 }"></a-table>

1.columns:table表格配置的列
2.dataSource:table表格的数据源
3.pagination:分页参数
4.changeTable:切换页码/页容量
5.rowSelection:计算属性,用于实时获取选择情况
6.rowClassNameFn:行样式

rowSelection开始说吧,前面的只要是有点经验的,都会知道了。。

 computed: {rowSelection() {return {selectedRowKeys: this.selectedRowKeys,selectedRows: this.selectedRows,onChange: (selectedRowKeys, selectedRows) => {this.selectedRowKeys = selectedRowKeys;},onSelect: (record, selected, row) => {if (selected) {this.selectedRows.push(record);} else {let selectedRows = [...this.selectedRows];this.selectedRows = selectedRows.filter((item) => item.id != record.id);}},onSelectAll: (selected, selectedRows, changeRows) => {if (selected) {this.selectedRows = this.selectedRows.concat(changeRows);} else {let selectedRows = [...changeRows];this.selectedRows = selectedRows.filter((item) => this.selectedRowKeys.indexOf(item.id) == -1);}},getCheckboxProps: (record) => ({props: {disabled:this.areadyRows &&this.areadyRows.filter((item) => (item.controlCardNo || item.cardNo) == record.cardNo).length > 0,},}),};},},

上面的selectedRowsselectedRowKeys就是对应的行id集合以及行集合数组,areadyRows就是已选择的数据,这个跟selectedRows不一样的问题在于是否跨页。

行样式:

//行高亮
rowClassNameFn(record) {if (this.areadyRows &&this.areadyRows.filter((item) => (item.controlCardNo || item.cardNo) == record.cardNo).length > 0) {return 'disabledCls';}
},

设置样式:

<style lang="less" scoped>
/deep/.ant-table-tbody > tr.disabledCls {background: #f7f7f7 !important;
}
/deep/.ant-table-tbody > tr.disabledCls:hover > td {background: #f7f7f7 !important;
}
</style>

完成!!!多多积累,多多收获!!!

相关文章:

antd+vue——实现table组件跨页多选,已选择数据禁止第二次重复选择

需求场景&#xff1a;点击【新增】按钮可以在分页弹窗中跨页多选选择数据后添加到页面中&#xff0c;再次点击【新增】&#xff0c;已经选择过的数据则置灰不让重复选择。 选择后&#xff0c;置灰 点击【确定】数据添加到页面中&#xff0c;可再次点击【新增】进行添加数据 …...

Python采集京东标题,店铺,销量,价格,SKU,评论,图片

京东的许多数据是通过 JavaScript 动态加载的&#xff0c;包括销量、价格、评论和评论时间等信息。我们无法仅通过传统的静态网页爬取方法获取到这些数据。需要使用到如 Selenium 或 Pyppeteer 等能够模拟浏览器行为的工具。 另外&#xff0c;京东的评论系统是独立的一个系统&a…...

数据中台指标管理系统

您所描述的是一个数据中台指标管理系统&#xff0c;它基于Spring Cloud技术栈构建。数据中台是企业数据管理和应用的中心平台&#xff0c;它整合了企业内外部的数据资源&#xff0c;提供数据服务和数据管理能力。以下是您提到的各个模块的简要概述&#xff1a; 1. **首页**&am…...

什么是ThreadLocal以及内存泄漏问题、hash冲突问题

ThreadLocal是什么 ThreadLocal类用来提供线程内部的局部变量 它主要有三大特性&#xff1a; 线程安全: 在多线程并发的场景下保证线程安全传递数据&#xff1a;通过ThreadLocal在同一线程传递公共变量线程隔离&#xff1a;每个线程的变量都是独立的&#xff0c;不会互相影响…...

从零开始做题:My_lllp

题目 给出一张png图片 解题 ┌──(holyeyes㉿kali2023)-[~/Misc/题目/zulu/My_lllp] └─$ python2 lsb.py extract my_lllp.png out.txt my_lllp [] Image size: 1080x1079 pixels. [] Written extracted data to out.txt. ┌──(holyeyes㉿kali2023)-[~/Misc/题目/zul…...

如何编译ffmpeg支持h265(hevc)?

推荐使用这里的文件&#xff1a;https://github.com/runner365/ffmpeg_rtmp_h265 根据你ffmpeg的源码 版本&#xff0c;切换到不同分支即可。 国内cdn方式: 新增codecid hevc/vp8/vp9/opus在rtmp中的codecid没有官方协议定义&#xff0c;由国内众多知名cdn共同制定。 FLV_COD…...

UNIAPP_顶部导航栏右侧添加uni-icons图标,并绑定点击事件,自定义导航栏右侧图标

效果 1、导入插件 uni-icons插件&#xff1a;https://ext.dcloud.net.cn/plugin?nameuni-icons 复制 uniicons.ttf 文件到 static/fonts/ 下 仅需要那个uniicons.ttf文件&#xff0c;不引入插件、单独把那个文件下载到本地也是可以的 2、配置页面 "app-plus":…...

Redis原理-数据结构

Redis原理篇 1、原理篇-Redis数据结构 1.1 Redis数据结构-动态字符串 我们都知道Redis中保存的Key是字符串&#xff0c;value往往是字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。 不过Redis没有直接使用C语言中的字符串&#xff0c;因为C语言字符串存…...

计算机网络 - 万字长文

计算机网络 二、计算机网络2.1 七层模型表格2.2 通俗讲解七层模型2.3 TCP与UDP对比2.4 TCP 三次握手过程==为什么握手是三次,而不是两次或者四次?====三次握手可以携带数据吗?====TCP三次握手失败,服务端会如何处理?====什么是半连接队列?全连接====ISN(Initial Sequence…...

基于java+springboot+vue实现的仓库管理系统(文末源码+lw+ppt)23-499

第1章 绪论 伴随着信息社会的飞速发展&#xff0c;仓库管理所面临的问题也一个接一个的出现&#xff0c;所以现在最该解决的问题就是信息的实时查询和访问需求的问题&#xff0c;以及如何利用快捷便利的方式让访问者在广大信息系统中进行查询、分享、储存和管理。这对我们的现…...

网络安全概述

这里写目录标题 信息安全现状及挑战概念常见的网络安全术语恶意程序的特点 信息安全的脆弱性网络环境的开放性协议栈道的脆弱性&#xff08;缺乏认证和加密 完整性&#xff09; 常见安全攻击传输层 ---TCP SYN Flood攻击分布式拒绝服务攻击(DDOS)社会工程学攻击钓鱼攻击水坑攻击…...

Java传引用问题

本文将介绍 Java 中的引用传递&#xff0c;包括其定义、实现方式、通过引用修改原来指向的内容和通过引用修改当前引用的指向的区别 目录 1、引用传递的概念 2、引用传递的实现方式 3、传引用会发生的两种情况&#xff1a; 通过引用修改当前引用的指向 通过引用修改原来指…...

P8086 『JROI-5』Music

题目背景 请注意到并不正常的时间限制。 本题读入量较大&#xff0c;建议使用较快的读入方式。 小 C 每年都要给丁总氪钱。 题目描述 小 C 喜欢在网易云听歌&#xff0c;她希望你能帮助她计算一下她的网易云的听歌时间。 小 C 有 n 条听歌记录&#xff0c;每条形如 x t&a…...

【Java]认识泛型

包装类 在Java中&#xff0c;由于基本类型不是继承自Object&#xff0c;为了在泛型代码中可以支持基本类型&#xff0c;Java给每个基本类型都对应了一个包装类型。 除了 Integer 和 Character&#xff0c; 其余基本类型的包装类都是首字母大写。 泛型 泛型是在JDK1.5引入的…...

git要忽略对文件的本地修改

要忽略对文件的本地修改&#xff08;即&#xff0c;使Git忽略对该文件的任何未提交更改&#xff09;&#xff0c;可以使用以下命令将该文件标记为假设未更改&#xff08;assume-unchanged&#xff09;&#xff1a; sh git update-index --assume-unchanged runtime/x64/skin/s…...

Linux学习笔记(三)文件权限

一、权限的分类 Linux权限分为r(读取)、w(写入)、x(执行)。我们在终端执行ls -l命令查看文件详细信息显示如下: [root@srv sun]# ls -l 总用量 0 drwxr-xr-x. 2 sun root 6 7月 5 14:05 公共 drwxr-xr-x. 2 sun root 6 7月 5 14:05 模板 drwxr-xr-x. 2 sun root…...

自定义类TMyLabel继承自QLabel ,实现mouseDoubleClickEvent

自定义类TMyLabel &#xff0c;继承自QLabel TMyLabel 中重新实现了 event 方法&#xff0c;重写了mouseDoubleClickEvent 发射信号 在主窗体中放入TMyLabel组件&#xff0c;将TMyLabel mouseDoubleClickEvent 信号&#xff0c; 绑定到实现方法do_doubleClick()槽函数 TMy…...

逻辑回归模型(非回归问题,而是分类问题)

目录&#xff1a; 一、Sigmoid函数&#xff1a;二、逻辑回归介绍&#xff1a;三、决策边界四、逻辑回归模型训练过程&#xff1a;1.训练目标&#xff1a;2.梯度下降调整参数&#xff1a; 一、Sigmoid函数&#xff1a; Sigmoid函数是构建逻辑回归模型的重要函数&#xff0c;如下…...

qt hasPendingDatagrams() 函数

hasPendingDatagrams 是 Qt 框架中 QUdpSocket 类的一个方法&#xff0c;用于检查是否有待处理的数据报到达。在 UDP 通信中&#xff0c;数据以数据报的形式发送&#xff0c;而 QUdpSocket 类提供了用于接收和处理这些数据报的功能。 功能描述 hasPendingDatagrams() 方法用于…...

数据结构第08小节:双端队列

双端队列&#xff08;deque&#xff0c;double-ended queue&#xff09;是一种具有队列和栈特性的数据结构&#xff0c;允许在其两端进行插入和删除操作。在Java中&#xff0c;java.util.Deque接口就是双端队列的实现&#xff0c;而ArrayDeque和LinkedList是其中的具体实现类。…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...