Vue3+antd:表格中合并多行相同数据

news2024/11/17 13:18:04

:本次以合并相同ID为示例

首先获取远程数据,获取完成之后对数据进行遍历

let customCellList = []; // {start:0,length:2,id:xx}
// 如果接口返回的数据相同ID之间不相邻,需要手动排序后才可以实现合并效果
res.data.forEach((item, index) => {
  if (index > 0) {
    let preItem = res.data[index - 1]
    if (preItem.id === item.id) {
      let custIndex = customCellList.findIndex(v => v.id == item.id)
      if (custIndex == -1) {
        customCellList.push({
          start: index - 1,
          length: 2,
          id: item.id
        })
      } else {
        customCellList[custIndex].length++
      }
    }
  }
})

最后得到的代码示例如下: 

根据数组设置合并行

const changeCustomCellFn = (arr) => {
  let nowCustomCell = (_, custIndex) => {
    let obj = { rowSpan: 1 }
    arr.forEach(item => {
      const { nowIndex, length } = item
      if (custIndex === nowIndex) {
        obj = {
          rowSpan: length,
        };
      } else if (nowIndex < custIndex && custIndex < nowIndex + length) {
        obj = {
          rowSpan: 0
        }
      }
    })
    return obj
  }
  // userColumns[0] 是Id列所在的位置,可根据位置不同调整 相应下标
  userColumns[0].customCell = nowCustomCell ; 
}

 

 

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

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

相关文章

使用共振峰提取元音音素/从声音生成口型动画

视频效果 我前段时间研究了下从声音提取共振峰的方法。今天测试了下实际效果。 我使用一段33秒的女声视频&#xff0c;提取元音后使用静态视位图序列生成了一个视频&#xff0c;效果如下&#xff1a; b站视频&#xff1a; https://www.bilibili.com/video/BV1JD421H7m9/?vd_…

基于SpringBoot+Vue的体检管理系统 免费获取源码

项目源码获取方式放在文章末尾处 项目技术 数据库&#xff1a;Mysql5.7/8.0 数据表&#xff1a;12张 开发语言&#xff1a;Java(jdk1.8) 开发工具&#xff1a;idea 前端技术&#xff1a;vue html 后端技术&#xff1a;SpringBoot 功能简介 (有文档) 项目获取关键字&…

Springboot+Vue项目-基于Java+MySQL的网上超市系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

【Redis】string数据类型

文章目录 常用命令setsetnx & NXXXsetex & EXpsetex & PX msetget & mgetincr & decrincrby & decrbyincrbyfloatappendgetrangesetrangestrlen 内部编码 字符串类型是 Redis 最基础的数据类型。 在redis中所有的键都是 string 类型&#xff0c;其他的…

[大模型]Qwen-Audio-chat FastApi 部署调用

Qwen-Audio-chat FastApi 部署调用 Qwen-Audio 介绍 Qwen-Audio 是阿里云研发的大规模音频语言模型&#xff08;Large Audio Language Model&#xff09;。Qwen-Audio 可以以多种音频 (包括说话人语音、自然音、音乐、歌声&#xff09;和文本作为输入&#xff0c;并以文本作为…

改进前后端交互实例

前后端交互实例(javaweb05)-CSDN博客 在这之前我假设大家都已经学完了IOC和DI 不明白的这里我也解释一下,首先是两个概念 1.控制反转:对象的创建控制权由程序自身转到外部(容器) 2.依赖注入:容器为程序提供运行时所依赖的资源 Bean对象:IOC容器中创建,关联的对象,称之为be…

蓝桥杯第十五界软件测试线下省赛题目分析及解决

PS 需要第十五界蓝桥杯被测系统或者功能测试模板、单元测试被测代码、自动化测试被测代码请加&#x1f427;:1940787338 备注&#xff1a;15界蓝桥杯省赛软件测试 题目1&#xff1a;功能测试 题目描述 ​ 某物流公司的货运收费标准根据重量、距离和节假日三个因素来确定。如…

MATLAB 体素滤波(62)

MATLAB 体素滤波(62) 一、算法介绍二、算法实现1.代码(已验证,直接运行)一、算法介绍 这里的代码完成文件读入,体素滤波,效果显示,结果输出的操作,下面是效果截图,后面是代码。 体素滤波(Voxel Filtering)是一种用于三维点云数据处理的方法,其原理类似于二维图像…

linux提权——提权大赏

文章目录 一、可读shadow文件利用提权二、可写shadow文件利用提权三、可写passwd文件利用提权四、sudo环境变量提权配置环境实验 五、自动任务文件权限提升配置环境实验 六、自动任务PATH环境变量提权七、自动任务通配符提权 一、可读shadow文件利用提权 ls -al /etc/shadow #…

JUC面试——⭐⭐Java中的四种引用类型/Threadlocal

四种引用类型 Java 中对象的引用分为四种级别&#xff0c;这四种级别由高到低依次为&#xff1a;强引用、软引用、弱引用和虚引用。 基础知识 强引用&#xff1a;普通使用的引用 强引用是造成 Java 内存泄漏的主要原因之一 软引用&#xff1a; GC内存不够时回收 适用于&…

RK3588 linux 修改ulimit 配置

前言 ulimit 主要是用来限制进程对资源的使用情况的&#xff0c;它支持各种类型的限制&#xff0c;常用的有&#xff1a; 内核文件的大小限制进程数据块的大小限制Shell进程创建文件大小限制可加锁内存大小限制常驻内存集的大小限制打开文件句柄数限制分配堆栈的最大大小限制C…

椋鸟数据结构笔记#10:排序·中

文章目录 四、归并排序时间复杂度实现递归实现非递归实现 测试稳定性 五、非比较排序5.1 计数排序时间复杂度实现测试局限性 5.2 桶排序时间复杂度实现测试 5.3 基数排序时间复杂度实现测试局限性 萌新的学习笔记&#xff0c;写错了恳请斧正。 四、归并排序 归并排序是一种非常…

pta L1-063 吃鱼还是吃肉

L1-063 吃鱼还是吃肉 分数 10 全屏浏览 切换布局 作者 陈越 单位 浙江大学 国家给出了 8 岁男宝宝的标准身高为 130 厘米、标准体重为 27 公斤&#xff1b;8 岁女宝宝的标准身高为 129 厘米、标准体重为 25 公斤。 现在你要根据小宝宝的身高体重&#xff0c;给出补充营养的…

java实现识别图片上的文字(OCR识别身份证等证件信息)

利用第三方jar包&#xff0c;实现识别图片上的文字。第三方支持地址&#xff1a;Spire.OCR for Java | 专业的图文识别组件&#xff0c;用以读取图片格式中的文本Spire.OCR for Java 是专为 Java 开发者设计的强大OCR库&#xff0c;提供高效的文字识别功能&#xff0c;能够从图…

Proxy 代理

意图 为其它对象提供一种代理以控制这个对象的访问。 结构 Proxy保存一个引用使得代理可以访问实体&#xff1b;提供一个与Subject的接口相同的接口&#xff0c;使代理可以用来替代实体&#xff1b;控制实体的存取&#xff0c;并可能负责创建和删除它&#xff1b;其他功能依赖…

企业文档知识库建设,数据安全如何保障?

随着现代市场经济的高速发展&#xff0c;企业的竞争优势越来越多体现在人才和科技的优势。而随着员工流动率的提升&#xff0c;随之流失的则是员工积累多年的宝贵工作经验&#xff0c;如果缺乏有效的内部知识库的建设和管理&#xff0c;企业的竞争优势将难以维系。「企业网盘」…

网络管理实验三、SNMP协议工作原理验证与分析

1 实验概括 实验目的&#xff1a; 学习捕获SNMP报文&#xff0c;通过报文分析理解SNMP协议的工作过程。 实验内容&#xff1a; 1&#xff09; 使用snmputilg发送SNMP数据包; 使用wireshark抓包&#xff1b;使用netstat –an查看代理站TCP/UDP连接表&#xff1b; 2&#xff09;…

单机调度问题(第i工件的完工时间=加工时间+等待时间)

第08章 制造系统的调度控制 - 百度文库 (baidu.com) 模拟退火单机极小化总流水时间的排序问题_哔哩哔哩_bilibili 在单机调度问题中&#xff0c;工件的完工时间是一个至关重要的指标&#xff0c;因为它直接反映了生产效率的高低。而完工时间的计算&#xff0c;必须同时考虑工件…

cocos creator 3.6 发布web手机端 加载进度条添加

cocos creator 升级到3.x之后加载进度条取消了&#xff0c;测试了多个3.x版本最终以creator 3.6.3版本&#xff0c;构建了简单的进度加载 参考链接&#xff1a; https://forum.cocos.org/t/topic/137113 打包web-mobile后&#xff0c;没有进度条。加载的时候只显示一个黑屏。…

贪吃蛇设计详解

在去年12月中&#xff0c;初次接触c语言&#xff0c;我靠着为数不多的知识&#xff0c;使用数组仿照写了一份贪吃蛇&#xff0c;现在时隔5个月&#xff0c;我已经有能力独立写出真正的贪吃蛇而不是简单的仿照&#xff08;虽然写的是挺简单的&#xff09;。 那么我们现在就正式…