el-table 合并单元格

news2025/1/9 14:54:51

参考文章:vue3.0 el-table 动态合并单元格 - flyComeOn - 博客园

<el-table :data="tableData" border empty-text="暂无数据" :header-cell-style="{ background: '#f5f7fa' }" class="parent-table" :span-method="objectSpanMethod">
getAll().then((rsp) => {
			if (rsp.status === HTTPStatus.OK) {
				tableData.value = rsp.data
				const colFields = ['groupNo', 'name', 'description', 'operation']
				setTableRowSpan(tableData.value, colFields)
			}
		})
		.catch(() => {})

// 设置合并的行和列
const setTableRowSpan = (tableData, colFields) => {
	let lastItem = []
	// 循环需要合并的列
	colFields.forEach((field, index) => {
		tableData.forEach((item) => {
			// 存值,把合并字段存入行,为了合并单元格时检索列是否含有该字段
			item.mergeCell = colFields
			// 合并的字段出现的次数
			const rowSpan = `rowspan_${field}`
			// 比较上一次的存值和该轮的合并字段,判断是否合并到上个单元格
			if (colFields.slice(0, index + 1).every((e) => lastItem[e] === item[e])) {
				// 如果是,合并行;
				item[rowSpan] = 0 // 该轮合并字段数量存0
				// 上轮合并字段数量+1
				lastItem[rowSpan] += 1
			} else {
				//初始化进入&& 如果不是,完成一次同类合并,lastItem重新赋值,进入下一次计算
				item[rowSpan] = 1 // 该轮合并字段第一次出现,数量存1
				// 改变比较对象,重新赋值,进行下一次计算
				lastItem = item
			}
		})
	})
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	if (row.mergeCell.includes(column.property)) {
		const rowspan = row[`rowspan_${column.property}`]
		if (rowspan) {
			return { rowspan: rowspan, colspan: 1 }
		} else {
			return { rowspan: 0, colspan: 0 }
		}
	}
}

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

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

相关文章

WebRTC 在视频联网平台中的应用:开启实时通信新篇章

在当今这个以数字化为显著特征的时代浪潮之下&#xff0c;实时通信已然稳稳扎根于人们生活与工作的方方面面&#xff0c;成为了其中不可或缺的关键一环。回首日常生活&#xff0c;远程办公场景中的视频会议让分散各地的团队成员能够跨越地理距离的鸿沟&#xff0c;齐聚一堂共商…

OpenAI CEO 奥特曼发长文《反思》

OpenAI CEO 奥特曼发长文《反思》 --- 引言&#xff1a;从 ChatGPT 到 AGI 的探索 ChatGPT 诞生仅一个多月&#xff0c;如今我们已经过渡到可以进行复杂推理的下一代模型。新年让人们陷入反思&#xff0c;我想分享一些个人想法&#xff0c;谈谈它迄今为止的发展&#xff0c;…

网络空间安全导论期末考试复习题

题型&#xff1a;10个选择题10个大题 1、选择题 简单&#xff0c;记忆书本里的小标题 2、大题&#xff08;较难&#xff09; 网络安全体系的五个层次的内容画公钥密码结合报文鉴别的示意图解释误用入侵检测并画示意图解释隧道技术并画示意图防火墙的作用&#xff0c;防火墙和…

接口测试-postman(使用postman测试接口笔记)

一、设置全局变量 1. 点击右上角设置按钮-》打开管理环境窗口-》选择”全局“-》设置变量名称&#xff0c;初始值和当前值设置一样的&#xff0c;放host放拼接的url&#xff0c;key放鉴权那一串字符&#xff0c;然后保存-》去使用全局变量&#xff0c;用{{变量名称}}形式 二、…

每日一题-两个链表的第一个公共结点

文章目录 两个链表的第一个公共结点问题描述示例说明示例 1示例 2 方法及实现方法描述代码实现 复杂度分析示例运行过程示例 1示例 2 总结备注 两个链表的第一个公共结点 问题描述 给定两个无环的单向链表&#xff0c;找到它们的第一个公共节点。如果没有公共节点&#xff0c…

API架构风格的深度解析与选择策略:SOAP、REST、GraphQL与RPC

❃博主首页 &#xff1a; 「码到三十五」 &#xff0c;同名公众号 :「码到三十五」&#xff0c;wx号 : 「liwu0213」 ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a…

【搜索】【推荐】大 PK

引言 在当今信息爆炸的时代&#xff0c;如何从海量数据中精准地为用户推荐最相关的内容成为了科技领域的关键挑战。搜推技术作为推荐系统的核心组件&#xff0c;扮演着至关重要的角色。本文将深入探讨这两种技术背后的方法论&#xff0c;剖析它们各自面临的难点&#xff0c;并…

[uniapp] 实现扫码功能,含APP、h5、小程序

&#x1f680; 个人简介&#xff1a;某大型国企资深软件开发工程师&#xff0c;信息系统项目管理师、CSDN优质创作者、阿里云专家博主&#xff0c;华为云云享专家&#xff0c;分享前端后端相关技术与工作常见问题~ &#x1f49f; 作 者&#xff1a;码喽的自我修养&#x1f9…

mysql、postgresql、druid链接池踩坑记录

The last packet successfully received from the server wIs 10,010 milliseconds ago. The last packet sent successfully to the server was 10,010 milliseconds ago.### The error may exist in URL mysql 链接字符串没有 &connectTimeout600000&socketTimeout6…

STM32+WIFI获取网络时间+8位数码管显示+0.96OLED显

资料下载地址&#xff1a;STM32WIFI获取网络时间8位数码管显示0.96OLED 1、项目介绍 主控芯片STM32C8T6 接线&#xff1a;串口1&#xff1a;PA9 PA10 OELD &#xff1a;PB6 PB7 数码管使用&#xff1a;MAX7219 8位数码管 Max7219_pinCLK PAout(5) Max7219_pinC…

FPGA车牌识别

基于FPGA的车牌识别主要包含以下几个步骤&#xff1a;图像采集、颜色空间转换、边缘检测、形态学处理&#xff08;腐蚀和膨胀&#xff09;、特征值提取、模板匹配、结果显示。先用matlab对原理进行仿真&#xff0c;后用vivado和modelsim进行设计和仿真。 一、1.图像采集采用ov…

一文流:Mysql进阶(多图提醒⚠️)

一文流系列是作者苦于技术知识学了-忘了&#xff0c;背了-忘了的苦恼&#xff0c;决心把技术知识的要点一笔笔✍️出来&#xff0c;一图图画出来&#xff0c;一句句讲出来&#xff0c;以求刻在&#x1f9e0;里。 该系列文章会把核心要点提炼出来&#xff0c;以求掌握精髓&#…

深度学习从入门到实战——卷积神经网络原理解析及其应用

卷积神经网络CNN 卷积神经网络前言卷积神经网络卷积的填充方式卷积原理展示卷积计算量公式卷积核输出的大小计算感受野池化自适应均值化空洞卷积经典卷积神经网络参考 卷积神经网络 前言 为什么要使用卷积神经网络呢&#xff1f; 首先传统的MLP的有什么问题呢&#xff1f; - …

自动化脚本本地可执行但是Jenkins上各种报错怎么解决

作者碎碎念&#xff1a; 测试环境 Jenkinsdockerpythonunittest&#xff0c; 测试问题&#xff1a;本人在写关于SAP4Me网站的自动化脚本时遇到一个问题 本地怎么都跑的通 但是一上Jenkins会出现各种各样的问题 因为在Jenkins里面脚本是放在docker环境里面跑的 所以环境的差异…

【xLua】xLua-master签名、加密Lua文件

GitHub - Tencent/xLua: xLua is a lua programming solution for C# ( Unity, .Net, Mono) , it supports android, ios, windows, linux, osx, etc. 如果你想在项目工程上操作&#xff0c;又发现项目工程并没导入Tools&#xff0c;可以从xLua-master工程拷贝到项目工程Assets…

Linux(上):基本知识篇

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、Linux初识1 Linux简介2 Linux学习环境配置(1)安装Linux(2)FinalShell远程连接Linux服务器二、Linux基础命令1 Linux目录结构,根目录 /2 Linux命令基础(1)什么是命令、命令行?(2)…

【安卓开发】【Android Studio】项目构建失败提示【Could not read metadata.bin】解决方法

一、问题说明 在Android Studio中开发安卓项目时&#xff0c;项目构建失败&#xff0c;提示如下&#xff1a; Could not read workspace data from xxx/xxx/&#xff08;某个目录&#xff0c;和gradle有关&#xff09;&#xff1a;could not read ...metadata.bin&#xff08…

细说STM32F407单片机以轮询方式读写外部SRAM的方法

目录 一、实例的功能 二、工程配置 1、KEYLED 2、时钟、DEBUG、USART6、NVIC、GPIO、CodeGenerator 3、FSMC &#xff08;1&#xff09; 模式设置 &#xff08;2&#xff09; Bank 1子区3参数设置 1) NOR/PSRAM control组&#xff0c;子区控制参数 2) NOR/PSRAM timi…

下载ffmpeg执行文件

打开网址&#xff1a;Download FFmpeg 按下面步骤操作 解压文件就可以看到ffmpeg的执行文件了&#xff0c;需要通过命令行进行使用&#xff1a; ffmpeg命令行使用参考&#xff1a; ffmpeg 常用命令-CSDN博客

嵌入式系统 (2.嵌入式硬件系统基础)

2.嵌入式硬件系统基础 2.1嵌入式硬件系统的组成 嵌入式硬件系统以嵌入式微处理器为核心&#xff0c;主要由嵌入式微处理器、总线、存储器、输入/输出接口和设备组成。 嵌入式微处理器 嵌入式微处理器采用冯诺依曼结构或哈佛结构&#xff1a;前者指令和数据共享同一存储空间…