element ui table进行相同数据合并单元格

embedded/2024/11/22 3:37:28/

示例如图

在这里插入图片描述

//要合并的项(自定义)
const columnArr =  ["dq","sj","xj","zj","zjj","zjfzr","nhxm","nhsjh","nhsfzh","","","","","ddzhl","ddw"]

首先计算需要合并的单元格

const spanData = ref<any>([])
const getSpanData = (data) => {columnArr.forEach((element) => {let contactDot = 0;const spanArr = <any>[];data.forEach((item, index) => {if (index === 0) {spanArr.push(1);} else {//先判断ID是否一样,再合并同类项if (item.id == data[index - 1].id && item[element] === data[index - 1][element]) {spanArr[contactDot] += 1;spanArr.push(0);} else {contactDot = index;spanArr.push(1);}}});spanData.value.push(spanArr);});
}

Table上绑定 span-method 属性

<el-table ref="roleTableRef" :data="dataList" :span-method="objectSpanMethod">
const objectSpanMethod = ({row,column,rowIndex,columnIndex,
}) => {if (columnArr.includes(column.property)) {if (spanData.value[columnIndex][rowIndex]) {return {rowspan: spanData.value[columnIndex][rowIndex],colspan: 1,};} else {return {rowspan: 0,colspan: 0,};}}
}

http://www.ppmy.cn/embedded/139509.html

相关文章

网络编程套接字概念(UTP和TCP)

前言&#xff1a; 认识了网络&#xff0c;我们就应该考虑一下如何编程实现不同主机上的应用进程之间如何进行双向互通的端点。 套接字&#xff08;Socket&#xff09;是网络编程的一种基本概念&#xff0c;套接字是应用程序通过网络协议进行通信的接口&#xff0c;是操作系统提…

C# AutoMapper 10个常用方法总结

前言 AutoMapper 是一个强大的对象映射库&#xff0c;用于简化和自动化复杂对象之间的转换。 官网地址&#xff1a;AutoMapper 文档地址&#xff1a;AutoMapper — AutoMapper documentation AutoMapper是以.NET(C#)语言开发的一个轻量的处理一个实体对象到另一个实体对象之间…

论文PDF页面无法下载PDF

问题&#xff1a;通常在下载学术论文时&#xff0c;网页命名是PDF页面&#xff0c;但是无法下载PDF&#xff0c;下载的是html网页 解决&#xff1a; mac&#xff1a;按F12打开开发者界面 然后点击源代码/来源选项 然后打开下图所在位置&#xff0c;鼠标右键复制链接&#xff…

深入探索Golang的GMP调度机制:源码解析与实现原理

在Golang&#xff08;又称Go语言&#xff09;的并发编程模型中&#xff0c;GMP调度模型扮演着举足轻重的角色。GMP分别代表Goroutine&#xff08;协程&#xff09;、M&#xff08;Machine&#xff0c;即内核线程&#xff09;和P&#xff08;Processor&#xff0c;即逻辑处理器&…

第7章硬件测试-7.3 功能测试

7.3 功能测试 7.3.1 整机规格测试7.3.2 整机试装测试7.3.3 DFX测试 功能测试包括整机规格、整机试装和整机功能测试&#xff0c;是整机结构和业务相关的测试。 7.3.1 整机规格测试 整机规格测试包括尺寸、重量、温度、功耗等数据。这些测试数据与设计规格进行比对和校验&…

计算机网络各层设备总结归纳(更新ing)

计算机网络按照OSI&#xff08;开放式系统互联&#xff09;模型分为七层&#xff0c;每一层都有其特定的功能和对应的网络设备。以下是各层对应的设备&#xff1a; 1. 物理层&#xff08;Physical Layer) 设备&#xff1a;中继器&#xff08;Repeater&#xff09;、集线器…

Elasticsearch面试内容整理-性能优化

Elasticsearch 性能优化涉及多个方面,包括集群架构、索引配置、查询优化和硬件配置等。性能优化旨在提高搜索速度、写入性能和集群的稳定性。以下是关于 Elasticsearch 性能优化的详细指南: 1. 集群配置与架构优化 节点类型与角色划分 节点类型的角色划分:

Pycharm

Pycharm PycharmPycharm汉化Pycharm基本设置 Pycharm PyCharm是一种Python IDE&#xff08;Integrated Development Environment&#xff0c;集成开发环境&#xff09;&#xff0c;带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具&#xff0c;比如调试、语法高…