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

:本次以合并相同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 ; 
}

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

VBA运行后,为什么excel的三个工作表结果一样?

运行完了excel的三个工作表的结果一样&#xff0c;问题在哪呢&#xff1f; 代码如下&#xff1a; Sub 计算成绩() 计算成绩 Macro i为工作表行号 Dim i, m, total As Integer Dim w1 As Worksheet For m 1 To Worksheets.count Set w1 Worksheets(m) i 2 total 0 …

【电机控制】滑模观测器PMSM无感控制波形图

【电机控制】滑模观测器PMSM无感控制波形图 文章目录 前言一、FOC控制1.三相电流2.Clark变换静止坐标系iαiβ3.park变换旋转坐标系idiq4.电流环PI控制输出UdUq5.UdUq 反park变换UαUβ 二、反电动势观测器BEMF1.静止坐标系iαiβ提取反电动势EaEb2.反电动势EaEb提取位置信息、…

HarmonyOS开发案例:【视频播放器】

介绍 基于video、swiper和slider组件&#xff0c;实现简单的视频播放器&#xff0c;可支持海报轮播、视频播放等功能。 相关概念 [video组件]&#xff1a;视频播放组件。[swiper组件]&#xff1a;滑动容器&#xff0c;提供切换子组件显示的能力。[slider组件]&#xff1a;滑…

【Linux】破解工具John the Ripper和端口扫描工具NMAP

一、弱口令检测---John the Ripper 1.了解 John the Ripper John the Ripper 是一款开源的密码破解工具&#xff0c;可使用密码字典&#xff08;包含各种密码组合的列表文件&#xff09;来进行暴力破解。 一款密码分析工具&#xff0c;支持字典式的暴力破解通过对shadow文件…

什么是区块链?什么是X314协议?

X314协议是一种基于区块链技术的分布式账本协议&#xff0c;具有去中心化、安全性高和可扩展性强的特点。本文将从多个角度对X314协议进行通俗解释&#xff0c;带您了解这一前沿技术。 一、什么是区块链和分布式账本&#xff1f; 首先&#xff0c;我们需要了解什么是区块链和分…

使用JavaScript创建数组,并对其进行冒泡排序

JavaScript创建数组方式 字面量方式&#xff1a;使用方括号 [] 来创建数组&#xff0c;并在方括号内按顺序列出数组元素。 let arr [1, 2, 3, 4, 5]; Array() 构造函数方式&#xff1a;使用 new Array() 构造函数来创建数组&#xff0c;并传入数组元素作为参数。 let arr ne…

论文笔记:Large Language Models Are Zero-Shot Time Series Forecasters

2023 neurips 完全是零样本&#xff08;zero-shot&#xff09;的&#xff0c;不需要微调 1 方法 1.1 Tokenization&#xff08;分词和编码&#xff09; 现有的LLM&#xff08;比如GPT3&#xff09;的tokenizer不能直接用来编码时间序列的句子 比如对数字42235630&#xff0…

网络工程师----第九天

路由表解析 路由表&#xff1a;简单点说路由表就是路由器用于指导数据包如何转发的表项&#xff0c;记录了去往目的IP的下一跳去哪里。 路由&#xff1a;路由是网络中的基本概念&#xff0c;网络的基本功能就是使得处于网络中两个IP地址能够互相通信。 路由表作用&#xff1a…

【Java】变量零基础教程

目录 一、引言 二、基本组成单位 三、变量的基本原理 四、变量的基本使用步骤 五、变量快速入门 六、变量使用的注意事项 一、引言 为什么需要变量&#xff1f; ​​​​​​一个程序就是一个世界。 大家看下图&#xff0c;是我们现实中的一张生活照&#xff0c;图里有树…

sc2024项目consul

1. 什么是consul HashiCorp Consul是一款服务网络解决方案&#xff0c;可让团队管理服务之间以及内部部署和多云环境及运行时的安全网络连接。consul提供服务发现、服务治理、流量管理和对网络基础设施设备的自动更新。(添加链接描述)Consul使用Go语言开发 2. 功能 多数据中…

【ARM 裸机】模仿 STM32 驱动开发

1、修改驱动 对于 STM32 来说&#xff0c;使用了一个结构体将一个外设的所有寄存器都放在一起&#xff0c;在上一节的基础上进行修改&#xff1b; 1.1、添加清除 bss 段代码&#xff0c; 1.2、添加寄存器结构体 新建一个文件&#xff0c;命名imx6u.h&#xff0c;注意地址的连…

PLC_博图系列☞N=:在信号下降沿置位操作数

、 PLC_博图系列☞N&#xff1a;在信号下降沿置位操作数 文章目录 PLC_博图系列☞N&#xff1a;在信号下降沿置位操作数背景介绍N&#xff1a; 在信号下降沿置位操作数说明参数示例 关键字&#xff1a; PLC、 西门子、 博图、 Siemens 、 N 背景介绍 这是一篇关于PLC编程的…

【C++】---STL之vector详解

【C】---STL之vector详解 一、vector的介绍&#xff1a;二、vector的成员函数&#xff1a;1、vector类的构造函数2、vector的元素访问符3、vector的迭代器4、vector的模版5、vector的拷贝构造6、vector的容量&#xff08;1&#xff09;vector的增容机制&#xff08;2&#xff0…

学习笔记Day21:转录组差异分析

转录组差异分析 差异分析难点在于将数据处理成需要的格式 表达矩阵 数值型矩阵-count 行名是symbol 低表达量的基因需要过滤 分组信息 因子&#xff0c;对照组在level第一位 与表达矩阵的列一一对应 项目名称 字符串&#xff08;不要有特殊字符&#xff09; TCGA-XX…

IntelliJ IDEA - Lombok supports: OpenJDK javac, ECJ

问题描述 java: You arent using a compiler supported by lombok, so lombok will not work and has been disabled.Your processor is: com.sun.proxy.$Proxy26Lombok supports: OpenJDK javac, ECJ 解决方案 在 IDEA 设置中 File -> Settings 中找到配置如下&#xff1…

openEuler-23.03下载、安装

一、下载 下载地址&#xff1a;openEuler下载 | 欧拉系统ISO镜像 | openEuler社区官网 下载版本&#xff1a;openEuler-23.03-x86_64-dvd.iso 二、安装 cd /etc/sysconfig/network-scripts/ vi ifcfg-ens-33## 要修改部分 BOOTPROTOstatic## 新增部分 IPADDR192.168.1.128 …

FPGA - ZYNQ 基于Axi_Lite的PS和PL交互

前言 在FPGA - ZYNQ 基于EMIO的PS和PL交互中介绍了ZYNQ 中PS端和PL端交互的开发流程&#xff0c;接下来构建基于基于Axi_Lite的PS和PL交互。 开发流程 Axi_Lite从机 在FPGA - AXI4_Lite&#xff08;实现用户端与axi4_lite之间的交互逻辑&#xff09;中&#xff0c;详解介绍…

【学习笔记】Vue3源码解析:第五部分 - 实现渲染(3)

课程地址&#xff1a;【已完结】全网最详细Vue3源码解析&#xff01;&#xff08;一行行带你手写Vue3源码&#xff09; 第五部分-&#xff1a;&#xff08;对应课程的第36 - 37节&#xff09; 第36节&#xff1a;《处理proxy&#xff0c;方便取值》 1、执行组件中的 render 方…

BootstrapAdmin Net7:基于RBAC的后台管理框架,实现精细化权限管理与多站点单点登录

BootstrapAdmin Net7&#xff1a;基于RBAC的后台管理框架,实现精细化权限管理与多站点单点登录 摘要 随着企业信息化建设的不断深入&#xff0c;后台管理系统在企业运营中扮演着越来越重要的角色。本文介绍了一款基于RBAC&#xff08;Role-Based Access Control&#xff09;的…

腾讯云轻量2核2G4M服务器优惠价格99元一年,多配置报价单

腾讯云轻量2核2G4M服务器优惠价格99元一年&#xff0c;多配置报价单。腾讯云服务器价格表2024年最新价格&#xff0c;轻量2核2G3M服务器61元一年、2核2G4M服务器99元1年&#xff0c;三年560元、2核4G5M服务器165元一年、3年900元、轻量4核8M12M服务器646元15个月、4核16G10M配置…