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,},}),};},},
上面的selectedRows和selectedRowKeys就是对应的行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组件跨页多选,已选择数据禁止第二次重复选择
需求场景:点击【新增】按钮可以在分页弹窗中跨页多选选择数据后添加到页面中,再次点击【新增】,已经选择过的数据则置灰不让重复选择。 选择后,置灰 点击【确定】数据添加到页面中,可再次点击【新增】进行添加数据 …...
Python采集京东标题,店铺,销量,价格,SKU,评论,图片
京东的许多数据是通过 JavaScript 动态加载的,包括销量、价格、评论和评论时间等信息。我们无法仅通过传统的静态网页爬取方法获取到这些数据。需要使用到如 Selenium 或 Pyppeteer 等能够模拟浏览器行为的工具。 另外,京东的评论系统是独立的一个系统&a…...
数据中台指标管理系统
您所描述的是一个数据中台指标管理系统,它基于Spring Cloud技术栈构建。数据中台是企业数据管理和应用的中心平台,它整合了企业内外部的数据资源,提供数据服务和数据管理能力。以下是您提到的各个模块的简要概述: 1. **首页**&am…...
什么是ThreadLocal以及内存泄漏问题、hash冲突问题
ThreadLocal是什么 ThreadLocal类用来提供线程内部的局部变量 它主要有三大特性: 线程安全: 在多线程并发的场景下保证线程安全传递数据:通过ThreadLocal在同一线程传递公共变量线程隔离:每个线程的变量都是独立的,不会互相影响…...
从零开始做题: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)?
推荐使用这里的文件:https://github.com/runner365/ffmpeg_rtmp_h265 根据你ffmpeg的源码 版本,切换到不同分支即可。 国内cdn方式: 新增codecid hevc/vp8/vp9/opus在rtmp中的codecid没有官方协议定义,由国内众多知名cdn共同制定。 FLV_COD…...
UNIAPP_顶部导航栏右侧添加uni-icons图标,并绑定点击事件,自定义导航栏右侧图标
效果 1、导入插件 uni-icons插件:https://ext.dcloud.net.cn/plugin?nameuni-icons 复制 uniicons.ttf 文件到 static/fonts/ 下 仅需要那个uniicons.ttf文件,不引入插件、单独把那个文件下载到本地也是可以的 2、配置页面 "app-plus":…...
Redis原理-数据结构
Redis原理篇 1、原理篇-Redis数据结构 1.1 Redis数据结构-动态字符串 我们都知道Redis中保存的Key是字符串,value往往是字符串或者字符串的集合。可见字符串是Redis中最常用的一种数据结构。 不过Redis没有直接使用C语言中的字符串,因为C语言字符串存…...
计算机网络 - 万字长文
计算机网络 二、计算机网络2.1 七层模型表格2.2 通俗讲解七层模型2.3 TCP与UDP对比2.4 TCP 三次握手过程==为什么握手是三次,而不是两次或者四次?====三次握手可以携带数据吗?====TCP三次握手失败,服务端会如何处理?====什么是半连接队列?全连接====ISN(Initial Sequence…...
基于java+springboot+vue实现的仓库管理系统(文末源码+lw+ppt)23-499
第1章 绪论 伴随着信息社会的飞速发展,仓库管理所面临的问题也一个接一个的出现,所以现在最该解决的问题就是信息的实时查询和访问需求的问题,以及如何利用快捷便利的方式让访问者在广大信息系统中进行查询、分享、储存和管理。这对我们的现…...
网络安全概述
这里写目录标题 信息安全现状及挑战概念常见的网络安全术语恶意程序的特点 信息安全的脆弱性网络环境的开放性协议栈道的脆弱性(缺乏认证和加密 完整性) 常见安全攻击传输层 ---TCP SYN Flood攻击分布式拒绝服务攻击(DDOS)社会工程学攻击钓鱼攻击水坑攻击…...
Java传引用问题
本文将介绍 Java 中的引用传递,包括其定义、实现方式、通过引用修改原来指向的内容和通过引用修改当前引用的指向的区别 目录 1、引用传递的概念 2、引用传递的实现方式 3、传引用会发生的两种情况: 通过引用修改当前引用的指向 通过引用修改原来指…...
P8086 『JROI-5』Music
题目背景 请注意到并不正常的时间限制。 本题读入量较大,建议使用较快的读入方式。 小 C 每年都要给丁总氪钱。 题目描述 小 C 喜欢在网易云听歌,她希望你能帮助她计算一下她的网易云的听歌时间。 小 C 有 n 条听歌记录,每条形如 x t&a…...
【Java]认识泛型
包装类 在Java中,由于基本类型不是继承自Object,为了在泛型代码中可以支持基本类型,Java给每个基本类型都对应了一个包装类型。 除了 Integer 和 Character, 其余基本类型的包装类都是首字母大写。 泛型 泛型是在JDK1.5引入的…...
git要忽略对文件的本地修改
要忽略对文件的本地修改(即,使Git忽略对该文件的任何未提交更改),可以使用以下命令将该文件标记为假设未更改(assume-unchanged): 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 ,继承自QLabel TMyLabel 中重新实现了 event 方法,重写了mouseDoubleClickEvent 发射信号 在主窗体中放入TMyLabel组件,将TMyLabel mouseDoubleClickEvent 信号, 绑定到实现方法do_doubleClick()槽函数 TMy…...
逻辑回归模型(非回归问题,而是分类问题)
目录: 一、Sigmoid函数:二、逻辑回归介绍:三、决策边界四、逻辑回归模型训练过程:1.训练目标:2.梯度下降调整参数: 一、Sigmoid函数: Sigmoid函数是构建逻辑回归模型的重要函数,如下…...
qt hasPendingDatagrams() 函数
hasPendingDatagrams 是 Qt 框架中 QUdpSocket 类的一个方法,用于检查是否有待处理的数据报到达。在 UDP 通信中,数据以数据报的形式发送,而 QUdpSocket 类提供了用于接收和处理这些数据报的功能。 功能描述 hasPendingDatagrams() 方法用于…...
数据结构第08小节:双端队列
双端队列(deque,double-ended queue)是一种具有队列和栈特性的数据结构,允许在其两端进行插入和删除操作。在Java中,java.util.Deque接口就是双端队列的实现,而ArrayDeque和LinkedList是其中的具体实现类。…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架,用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录,以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败,具体原因是客户端发送了密码认证请求,但Redis服务器未设置密码 1.为Redis设置密码(匹配客户端配置) 步骤: 1).修…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
