ant-design-vue table 同时勾选或者取消勾选某字段值相同的数据

Ant-design-vue 库中 Table 组件 API 有个 rowKey 属性:表格行 key 的取值,既可以是字符串,也可以是一个函数,它在 rowSelection 选择功能的配置中尤为重要。

在勾选或者取消选中项回调的 onChange 事件中,有两个参数返回,分别是 selectedRowKeys 和 selectedRows。selectedRowKeys 是勾选的 rowKey 值的数组,selectedRows 是勾选的数组。

使用 rowKey 将其绑定为某个字段(这里指的是我们该字段相同的值同时勾选或者取消勾选的字段),这里的确可以实现样式上的同时勾选,但是 selectedRowKeys 和 selectedRows 都只有一项数据,勾选后统计勾选的数据信息汇总就存在问题了,因此我们如何实现该功能呢?具体代码如下:

handleSelectChange (selectedRowKeys, selectedRows) {if (selectedRowKeys.length) {// this.selectedRows 与 selectedRows 的差集const difference = this.selectedRows.filter(item => !selectedRows.map(row => row.id).includes(item.id))// 本次勾选条数小于上次勾选条数,说明是取消勾选const rows = this.selectedRowsLength > selectedRows.length// 取消勾选,需要过滤掉差集中 rpoNo 不相同的数据? selectedRows.filter(item => ![...new Set(difference.map(item => item.rpoNo))].includes(item.rpoNo))// 勾选,需要 selectedRows 中的数据: (this.tableData.length === selectedRows.length && this.selectedRowsLength === this.tableData.length) ? [] : selectedRows// 根据 rpoNo 过滤出所有勾选数据const data = rows.map(item => {return this.tableData.filter(record => record.rpoNo === item.rpoNo)}).flat()// 清空勾选this.$refs.table.$refs.tableList.clearSelected()// 本次勾选数据this.selectedRowKeys = [...new Set(data.map(item => item[this.rowKey]))]this.selectedRows = mergeWeightRemoval(data, [], this.rowKey) || []// 本次勾选条数this.selectedRowsLength = this.selectedRowKeys.length// 刷新表格勾选状态this.$refs.table.$refs.tableList.refreshStatic()} else {this.selectedRowKeys = selectedRowKeysthis.selectedRows = selectedRows}
},
  • selectedRows 为已勾选数据,this.tableData 为当前页数据,this.selectedRows 为所有勾选数据
  • 首先取 this.selectedRows 与 selectedRows 的差集,即获取到本次操作的数据 difference
  • 其次使用 this.selectedRowsLength 与 selectedRows 比较是勾选操作还是取消勾选操作
  • 如果是取消操作的话,我们需要把某字段值相同的数据也要取消掉,因此这里我们对 selectedRows 过滤掉不包含在 difference 中的数据,如果是勾选的话,就无需处理,此时我们就得到了目前勾选数据 row
  • 我们需要根据勾选的数据,在 tableData 找出某字段值相同的数据,并且也勾选上,因此遍历 row 数组,通过 tableData 使用 filter 找出某字段值相同的所有数据 data
  • 最后我们将 data 中的数据复制到 selectedRowKeys 和 selectedRows 中,同时记录当前勾选条数,在此之前我们使用 clearSelected 方法清空了勾选项,以及调用 refreshStatic 方法刷新表格勾选状态。
<table-listref="table" size="small"rowKey={this.rowKey} borderedcolumns={config.notWriteOffColumns.call(this, h)}dataSource={this.getList} row-selection={{fixed: true,getCheckboxProps: record => ({props: {defaultChecked: this.selectedRowKeys.length ? this.selectedRowKeys.includes(record[this.rowKey]) : false,},}),onChange: this.handleSelectChange.bind(this),}}scopedSlotsList={this.scopedSlotsList}
/>

优化版
上述我们通过人为筛选了需要勾选的数据,后来我又尝试修改 rowKey 字段,此时 selectedRowKeys 和 selectedRows 只有一项的话,我们就人为 selectedRows 的勾选项添上,在统计数据汇总时,就避免了汇总不正确的问题啦。

handleSelectChange (selectedRowKeys, selectedRows) {// 根据 rpoNo 过滤出所有勾选数据const data = selectedRows.map(item => {return this.tableData.filter(record => record.rpoNo === item.rpoNo)}).flat()const row = mergeWeightRemoval(data, [], 'id') || []this.selectedRowKeys = [...new Set(row.map(item => item[this.rowKey]))]this.selectedRows = row
}

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

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

相关文章

Linux 中的 comm 命令及示例

comm 逐行比较两个排序的文件并写入标准输出;常见的线条和独特的线条。 假设您有两个人员列表,并且要求您找出其中一个列表中可用而另一个列表中不可用的名称,甚至是两个列表中共有的名称。comm是帮助您实现这一目标的命令。它需要两个排序的文件,并逐行比较。在进一步讨论…

Mysql binlog的三种模式statement,row,mixed详解,以及无主键造成复制延时的测试

2.1 Statement 模式的概念 Statement 是基于语句的复制模式。 Statement 模式将数据库中执行的修改操作记录为 SQL 语句&#xff0c;再从数据库上执行相同的 SQL 语句来实现数据同步。 2.2 Statement 模式的优点 Statement 模式的优点是简单明了&#xff0c;易于理解和实现。…

基于Java SSM+layui+mysql实现的图书借记管理系统源代码+数据库

介绍 本项目使用的技术栈是SSMlayuimysql&#xff0c;服务器使用的是tomcat 其中书籍图片存放的位置需要先在tomcat根目录下conf/setting.xml中配置虚拟路径&#xff0c;本项目配置的是D:\upload 完整代码下载地址&#xff1a;图书借记管理系统 用户角色划分 游客 使用本系…

ArcGis地图

1、概述 官网&#xff1a;https://developers.arcgis.com/qt/ 官网&#xff1a;官网指导 官网&#xff1a;Add graphics to a map view 官网&#xff1a;Esri官方博客 官网(github)&#xff1a;https://github.com/Esri Arcgis runtime sdk for Qt 开发记录&#xff08;系列文…

Vue+NodeJS实现邮件发送

一.邮箱配置 这里以QQ邮箱为例,网易邮箱类似. 设置->账号 二.后端服务搭建 index.js const express require(express) const router require(./router); const app express()// 使用路由文件 app.use(/,router);app.listen(3000, () > {console.log(server…

项目上线部署--》网站运行机制

网站运行机制 &#x1f31f;名词解释 域名 DNS 服务器 服务器 &#x1f31f; 网站请求流程 静态页面 动态页面 前后端分离的页面 前后端不分离的页面 &#x1f31f;写在最后 &#x1f31f;名词解释 域名 www.baidu.comwww.taobao.comwww.qq.com 域名俗称网址&#xf…

MVCC

MVCC&#xff08;Multi-Version Concurrency Control&#xff09;是数据库管理系统&#xff08;DBMS&#xff09;中的一种技术&#xff0c;用于管理并发访问数据&#xff0c;允许多个事务同时进行而不互相干扰&#xff0c;同时保持数据的一致性。 MVCC 的工作原理如下&#xf…

AI入门指南:探索人工智能的基础原理和实际应用

引言 介绍AI的基本概念&#xff1a;什么是人工智能&#xff0c;为什么它如此重要。 引出博客的主要内容&#xff0c;即AI的基础原理和实际应用。 第一部分&#xff1a;AI的基础原理 什么是人工智能&#xff1a; 解释AI的定义和范畴。 介绍AI的历史和发展。 机器学习入门&#x…

高级深入--day22

机器视觉 从 Google 的无人驾驶汽车到可以识别假钞的自动售卖机&#xff0c;机器视觉一直都是一个应用广 泛且具有深远的影响和雄伟的愿景的领域。 我们将重点介绍机器视觉的一个分支&#xff1a;文字识别&#xff0c;介绍如何用一些 Python库来识别和使用在线图片中的文字。…

Qt 10进制和16进制转换

10进制和16进制转换 通过标准库std::stringstream进行10进制和16进制转换10进制转换成16进制16进制转换成10进制 通过QString::number()和toInt()、setNumbe()等方法进行转换10进制转换成16进制16进制转换成10进制 格式化输出 在项目开发中&#xff0c;如何进行进制转换&#x…

Linux centos7 bash编程训练__打印各类形状

利用for循环&#xff0c;打印各种不同的三角形、矩形和菱形。 主要是fort循环嵌套使用&#xff0c;及条件判断等。 因方法简单&#xff0c;不作更多解释&#xff0c;部分注释可以帮助初学者掌握代码。 下面列出代码&#xff0c;供参考。 #! /bin/bash ## 打印输出各种*型形…

觉非科技数据闭环系列 | BEV感知研发实践

随着自动驾驶迈向量产场景&#xff0c;“BEV感知数据闭环”已成为新一代自动驾驶量产系统的核心架构。数据成为了至关重要的技术驱动力&#xff0c;发挥数据闭环的飞轮效应或将成为下半场从1到N的胜负关键。 觉非科技在此方面已进行了大量的研究工作&#xff0c;并在实际量产项…

解决nbsp;不生效的问题

代码块 {{title}} title:附 \xa0\xa0\xa0件,//或者 <span v-html"title"></span> title:附 件&#xff1a;,效果图

volatile 变量是什么?volatile 变量和 atomic 变量有什么不同?

volatile 变量是一种在Java中用于修饰字段的关键字,用于确保多线程之间的可见性和禁止指令重排序。volatile 修饰的变量具有以下特性: 可见性(Visibility):volatile 变量的值对所有线程都是可见的。当一个线程修改了 volatile 变量的值,其他线程会立即看到这个变化。 禁止…

Elasticsearch近实时架构

1 Elasticsearch 与 Lucene 的结构理解 一个Elasticsearch索引由一个或多个分片&#xff08;shards&#xff09;组成。这些分片可以是主分片&#xff08;primary shard&#xff09;或副本分片&#xff08;replica shard&#xff09;。每个分片都是一个独立的Lucene索引&#xf…

Unity 性能优化Shader分析处理函数:ShaderUtil.GetShaderGlobalKeywords用法

Unity 性能优化Shader分析处理函数&#xff1a;ShaderUtil.GetShaderGlobalKeywords用法 点击封面跳转下载页面 简介 Unity 性能优化Shader分析处理函数&#xff1a;ShaderUtil.GetShaderGlobalKeywords用法 在Unity开发中&#xff0c;性能优化是一个非常重要的方面。一个常见…

verilog写rom,采用端口排序顺序例化

verilog写rom,采用端口排序顺序例化 1,介绍rom,以及rom与ram的区别2,RTL设计模块、门级网表以及testbench测试模块2.1 RTL设计2.2 门级网表2.3 testbench3,波形输出1,介绍rom,以及rom与ram的区别 参考文献: 1, 转载-ROM、RAM存储器原理详解以及DRAM、SRAM、SDRAM 、FLA…

修改Tomcat的默认端口号

1、找到Tomcat的安装路径。 2、打开conf文件夹。 3、用记事本打开server.xml文件 4、找到 <Connector port"8080" protocol"HTTP/1.1"&#xff0c;其中的8080就是tomcat的默认端口&#xff0c;将其修改为你需要的端口即可。

github 创建自己的分支 并下载代码

github创建自己的分支 并下载代码 目录概述需求&#xff1a; 设计思路实现思路分析1.进入到master分支&#xff0c;git checkout master;2.master-slave的个人远程仓库3.爬虫调度器4.建立本地分支与个人远程分支之间的联系5.master 拓展实现 参考资料和推荐阅读 Survive by day…

Prometheus 监控指南:如何可靠地记录数字时间序列数据

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f405;&#x1f43e;猫头虎建议程序员必备技术栈一览表&#x1f4d6;&#xff1a; &#x1f6e0;️ 全栈技术 Full Stack: &#x1f4da…