el-table 合并单元格

参考文章: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 }
		}
	}
}

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

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

相关文章

C/C++进阶-函数

C/C入门-函数起始 函数引用与指针函数参数 指针写法 和 数组写法数组的引用右值引用概念&#xff1a;**反汇编&#xff1a;**总结用结构体的示例再理解一遍 函数的本质栈分析栈溢出攻击 函数重载函数重载 进阶 思考函数重载补充 函数模板&#xff08;1&#xff09;&#xff08;…

通俗易懂之线性回归时序预测PyTorch实践

线性回归&#xff08;Linear Regression&#xff09;是机器学习中最基本且广泛应用的算法之一。它不仅作为入门学习的经典案例&#xff0c;也是许多复杂模型的基础。本文将全面介绍线性回归的原理、应用&#xff0c;并通过一段PyTorch代码进行实践演示&#xff0c;帮助读者深入…

分布式主键ID生成方式-snowflake雪花算法

这里写自定义目录标题 一、业务场景二、技术选型1、UUID方案2、Leaf方案-美团&#xff08;基于数据库自增id&#xff09;3、Snowflake雪花算法方案 总结 一、业务场景 大量的业务数据需要保存到数据库中&#xff0c;原来的单库单表的方式扛不住大数据量、高并发&#xff0c;需…

在 C# 中显示动画 GIF 并在运行时更改它们

您可以通过将按钮、图片框、标签或其他控件的Image属性设置为 GIF 文件 来显示动画 GIF 。&#xff08;如果您在窗体的BackgroundImage属性中显示一个&#xff0c;则不会获得动画。&#xff09; 有几种方法可以在运行时更改 GIF。 首先&#xff0c;您可以将 GIF 添加为资源。…

【技术支持】安卓无线adb调试连接方式

Android 10 及更低版本&#xff0c;需要借助 USB 手机和电脑需连接在同一 WiFi 下&#xff1b;手机开启开发者选项和 USB 调试模式&#xff0c;并通过 USB 连接电脑&#xff08;即adb devices可以查看到手机&#xff09;&#xff1b;设置手机的监听adb tcpip 5555;拔掉 USB 线…

【网络】计算机网络的分类 局域网 (LAN) 广域网 (WAN) 城域网 (MAN)个域网(PAN)

局域网是通过路由器接入广域网的 分布范围 局域网Local Area Network&#xff1a;小范围覆盖&#xff0c;速度高&#xff0c;延迟低(办公室&#xff0c;家庭&#xff0c;校园&#xff0c;网络) 广域网Wide Area Network 大范围覆盖&#xff0c;速度相对低&#xff0c;延迟高…

scanf:数据之舟的摆渡人,静卧输入港湾的诗意守候

大家好啊&#xff0c;我是小象٩(๑ω๑)۶ 我的博客&#xff1a;Xiao Xiangζั͡ޓއއ 很高兴见到大家&#xff0c;希望能够和大家一起交流学习&#xff0c;共同进步。* 这一节我们主要来学习scanf的基本用法&#xff0c;了解scanf返回值&#xff0c;懂得scanf占位符和赋值…

win10 gt520+p106双卡测试

安装391.35驱动失败,虽然gpuz和设备管理器显示正常但没有nvidia控制面板 重启进安全模式,ddu卸载,再次重启到安全模式,安装391.01驱动,显示3dvision安装失败,重启再看已经有nvidia控制面板了 修改p106注册表 AdapterType 1 EnableMsHybrid 1 计算机\HKEY_LOCAL_MACHINE\SYSTE…

C# OpenCV机器视觉:霍夫变换

在一个阳光灿烂得近乎放肆的午后&#xff0c;阿强的实验室就像被施了魔法的科学城堡&#xff0c;到处闪耀着神秘的科技光芒。阿强呢&#xff0c;像个即将踏上惊险征程的探险家&#xff0c;一屁股坐在那堆满奇奇怪怪设备的桌前&#xff0c;眼神中透露出按捺不住的兴奋劲儿&#…

【深度学习基础】线性神经网络 | 线性回归的简洁实现

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈PyTorch深度学习 ⌋ ⌋ ⌋ 深度学习 (DL, Deep Learning) 特指基于深层神经网络模型和方法的机器学习。它是在统计机器学习、人工神经网络等算法模型基础上&#xff0c;结合当代大数据和大算力的发展而发展出来的。深度学习最重…

工业级手持地面站(支持Android和IOS)技术详解!

一、硬件平台的选择 无人机遥控器为了支持Android和iOS系统&#xff0c;通常会选择高性能的处理器和操作系统作为硬件基础。例如&#xff0c;一些高端遥控器可能采用基于ARM架构的高性能处理器&#xff0c;这些处理器能够高效地运行Android或iOS操作系统&#xff0c;并提供足够…

CatLog的使用

一 CatLog的简介 1.1 作用 CAT&#xff08;Central Application Tracking&#xff09; 是基于 Java 开发的实时应用监控平台&#xff0c;为美团点评提供了全面的实时监控告警服务。 1.2 组成部分 1.2.1 Transaction 1.Transaction 适合记录跨越系统边界的程序访问行为&a…

vue elementui 大文件进度条下载

下载进度条 <el-card class"box-card" v-if"downloadProgress > 0"><div>正在下载文件...</div><el-progress :text-inside"true" :stroke-width"26" :percentage"downloadProgress" status"…

TensorRT-LLM中的MoE并行推理

2种并行方式&#xff1a; moe_tp_size&#xff1a;按照维度切分&#xff0c;每个GPU拥有所有Expert的一部分权重。 moe_ep_size: 按照Expert切分&#xff0c;每个GPU有用一部分Expert的所有权重。 二者可以搭配一起使用。 限制&#xff1a;二者的乘积&#xff0c;必须等于模…

计算机的错误计算(二百零五)

摘要 基于一位读者的问题&#xff0c;提出题目&#xff1a;能用数值计算证明 吗&#xff1f;请选用不同的点&#xff08;即差别大的数&#xff09;与不同的精度。实验表明&#xff0c;大模型理解了题意。但是&#xff0c;其推理能力值得商榷。 例1. 就摘要中问题&#xff0…

关于TCP/IP五层结构的理解

关于TCP/IP五层结构的理解 TCP/IP五层模型 是目前被广泛采用的一种模型,我们可以将 TCP / IP 模型看作是 OSI 七层模型的精简版本&#xff0c;由以下 5 层组成&#xff1a; 1. 应用层&#xff1a;应用层是体系结构中的最高层&#xff0c;定义了应用进程间通信和交互的规则。本…

Unity3D仿星露谷物语开发19之库存栏丢弃及交互道具

1、目标 从库存栏中把道具拖到游戏场景中&#xff0c;库存栏中道具数相应做减法或者删除道具。同时在库存栏中可以交换两个道具的位置。 2、UIInventorySlot设置Raycast属性 在UIInventorySlot中&#xff0c;我们只希望最外层的UIInventorySlot响应Raycast&#xff0c;他下面…

Sprint Boot教程之五十:Spring Boot JpaRepository 示例

Spring Boot JpaRepository 示例 Spring Boot建立在 Spring 之上&#xff0c;包含 Spring 的所有功能。由于其快速的生产就绪环境&#xff0c;使开发人员能够直接专注于逻辑&#xff0c;而不必费力配置和设置&#xff0c;因此如今它正成为开发人员的最爱。Spring Boot 是一个基…

C++ STL map和set的使用

序列式容器和关联式容器 想必大家已经接触过一些容器如&#xff1a;list&#xff0c;vector&#xff0c;deque&#xff0c;array&#xff0c;forward_list&#xff0c;string等&#xff0c;这些容器统称为系列容器。因为逻辑结构为线性的&#xff0c;两个位置的存储的值一般是…

人工智能及深度学习的一些题目(三)

1、【填空题】 使用RNNCTC模型进行语音识别&#xff0c;在产生预测输出时&#xff0c;对于输入的音频特征序列通过网络预测产生对应的字母序列&#xff0c;可以使用&#xff08; beamsearch &#xff09;算法进行最优路径搜索。 2、【填空题】 逻辑回归模型属于有监督学习中的&…