vue table id一样的列合并

news2024/9/28 3:00:18

合并场景:如果id一样,则主表列合并,子表列不做合并,可实现单行、多行合并,亲测!!!
展示效果如图示:
在这里插入图片描述
组件代码:

// table组件  :span-method="objectSpanMethod" 一定要有这个方法,合并逻辑都在这个里面
	<el-table
			:data="dataList"
			:span-method="objectSpanMethod"
			border
		>
			<el-table-column prop="className" label="班级" />
			<el-table-column prop="name" label="姓名" />
			<el-table-column prop="sex" label="性别"  />
			<el-table-column prop="dataType" label="科目" />
			<el-table-column prop="score" label="分数" />
		</el-table>

js代码:

//数据格式
dataList: [
				{id:"1",className:"3-1",name:"张三",sex:"男",dataType:"数学",score:"81"},
				{id:"1",className:"3-1",name:"张三",sex:"男",dataType:"英语",score:"33"},
				{id:"1",className:"3-1",name:"张三",sex:"男",dataType:"历史",score:"66"},
				{id:"2",className:"3-2",name:"李四",sex:"女",dataType:"科学",score:"13"},
				{id:"2",className:"3-2",name:"李四",sex:"女",dataType:"英语",score:"90"},
			],

//合并的js逻辑  需要合并多少列就写几列
objectSpanMethod({row, column, rowIndex, columnIndex}) {
			const _row = this.flitterData(this.dataList).one[rowIndex];
			const _col = _row > 0 ? 1 : 0;
			//合并第一列
			if (columnIndex === 0) {
				return {
					rowspan: _row,
					colspan: _col,
				};
			}
			//合并第二列
			if (columnIndex === 1) {
				return {
					rowspan: _row,
					colspan: _col,
				};
			}
			//合并第三列
			if (columnIndex === 2) {
				return {
					rowspan: _row,
					colspan: _col,
				};
			}
		},
		flitterData(arr) {
			let spanOneArr = [];
			let concatOne = 0;
			arr.forEach((item, index) => {
				if (index === 0) {
					spanOneArr.push(1);
				} else {
					// 如果id一样,就合并,根据自己的需求来改,id换为要比较的列名
					if (item.id == arr[index - 1].id) {
						spanOneArr[concatOne] += 1;
						spanOneArr.push(0);
					} else {
						spanOneArr.push(1);
						concatOne = index;
					}
				}
			});
			return {
				one: spanOneArr,
			};
		},

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

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

相关文章

网络安全 DVWA通关指南 DVWA SQL Injection (Blind SQL盲注)

DVWA SQL Injection (Blind) 文章目录 DVWA SQL Injection (Blind)Low布尔盲注时间盲注sqlmap MediumHighImpossible 参考文献 WEB 安全靶场通关指南 Low 0、分析网页源代码 <?phpif( isset( $_GET[ Submit ] ) ) {// Get input$id $_GET[ id ];// Check database$geti…

基于spring boot的车辆故障综合服务平台设计与实现----附源码 73314

摘 要 近年来&#xff0c;随着社会科技的不断发展&#xff0c;人们的生活方方面面进入了信息化时代。计算机的普及&#xff0c;使得我们的生活更加丰富多彩。本论文基于Spring Boot框架&#xff0c;设计并实现了一个车辆故障综合服务平台&#xff0c;旨在提供便捷、高效的汽车…

c++类模板为什么不能编译到动态库中来使用

在使用c的时候&#xff0c;我们习惯于将类的定义声明在头文件中&#xff0c;即.h文件&#xff1b;将类函数的实现定义在源文件中&#xff0c;即.cpp文件。如果我们要提供的是一个动态库&#xff0c;那么这种方式更常用&#xff0c;使用动态库的时候&#xff0c;包含头文件&…

如何注册Liberty大学并获取Perplexity Pro

俗称白嫖 Perplexity Pro 会员 如何注册Liberty大学并获取Perplexity Pro 1. 访问官网 首先&#xff0c;进入Liberty大学官网 https://www.liberty.edu&#xff0c;点击“Apply”按钮。 2. 选择课程 选择“Online”课程&#xff0c;选择“Certificate”&#xff0c;然后随便…

深入理解Docke工作原理:UnionFS文件系统详解

在容器技术的世界中&#xff0c;文件系统的设计和实现是其关键组成部分&#xff0c;影响着镜像的构建效率、容器的启动速度以及资源的利用率。**UnionFS&#xff08;联合文件系统&#xff09;**作为Docker的核心文件系统技术&#xff0c;通过其独特的分层结构和写时复制&#x…

5 - ZYNQ SDK学习记录(2)

文章目录 1 Vivado工程基本设计2 Vivado工程位置不变2.1 修改设计1 - 增加PS侧QSPI外设2.2 修改设计2 - 增加PL侧AXI GPIO外设2.3 总结 3 Vivado工程位置变动3.1 先修改BD后打开SDK3.2 先打开SDK后修改BD3.3 总结 1 Vivado工程基本设计 Step 1&#xff1a; Vivado版本Vivado …

【观影聊数学】聊聊电影《孤注一掷》中的数学逻辑

反电诈题材影片《孤注一掷》取材于真实案例&#xff0c;揭秘了境外电信网络诈骗黑色产业链的骇人内幕。境外诈骗集团往往以高薪招聘为诱饵&#xff0c;吸引有发财梦的人去境外淘金&#xff0c;一旦人们走出国门&#xff0c;跳入犯罪分子设下的陷阱里&#xff0c;等待他们的将是…

【python爬虫】之scrapy框架介绍

一.什么是Scrapy&#xff1f; Scrapy是一个为了爬取网站数据&#xff0c;提取结构性数据而编写的应用框架&#xff0c;非常出名&#xff0c;非常强悍。所谓的框架就是一个已经被集成了各种功能&#xff08;高性能异步下载&#xff0c;队列&#xff0c;分布式&#xff0c;解析&a…

SpringBoot开发——使用@Slf4j注解实现日志输出

文章目录 1、Lombok简介2、SLF4J简介3、实现步骤3.1 创建SpringBoot项目3.2 添加依赖3.3 使用 Slf4j 注解3.4 输出日志信息 4、结论 在现代Java开发中&#xff0c;日志记录是至关重要的。它不仅帮助开发者调试代码&#xff0c;还便于监控系统运行状态和性能。 Lombok 和 SLF4J …

了解水凝胶纤维制造?自润滑纺丝来帮忙!高韧性纤维用途广!

大家好&#xff0c;今天我们来了解一篇水凝胶纤维文章——《Continuous Spinning of High‐Tough Hydrogel Fibers for Flexible Electronics by Using Regional Heterogeneous Polymerization》发表于《Advanced Science》。在柔性电子领域&#xff0c;水凝胶纤维因其独特的性…

检查一个复数C的实部a和虚部b是否都是有限数值即a和b都不是无限数值、空值cmath.isfinite(x)

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 检查一个复数C的实部a和虚部b 是否都是有限数值 即a和b都不是无限数值、空值 cmath.isfinite(x) [太阳]选择题 根据给定的Python代码&#xff0c;哪个选项是错误的&#xff1f; import cma…

适合小客厅使用的投影仪推荐:2024年当贝X5S小户型客厅的最佳选择

我们在买投影前都会先看看家里的环境、预算以及自己的需求去选择适合自己的家的那款&#xff1b;正好最近有朋友向我资讯&#xff1a;我家客厅面积不大&#xff0c;有没有适合的家用投影仪推荐啊&#xff1f;对于这种家庭使用环境不大的小客厅我们该如何挑选投影仪&#xff1f;…

人员抽烟AI检测算法在智慧安防领域的创新应用,助力监控智能化

随着人工智能技术的飞速发展&#xff0c;计算机视觉和深度学习算法在各个领域的应用日益广泛。其中&#xff0c;人员抽烟AI检测算法以其高效、精准的特点&#xff0c;成为公共场所、工厂、学校等场景中的得力助手。本文将介绍TSINGSEE青犀AI智能分析网关V4人员抽烟检测算法的基…

JavaScript高级——执行上下文栈

1、在全局代码执行前&#xff0c;JS引擎就会创建一个栈来存储管理所有的执行上下文对象 2、在全局执行上下文&#xff08;window&#xff09;确定后&#xff0c;将其添加到栈中&#xff08;压栈&#xff09; 3、在函数执行上下文创建后&#xff0c;将其添加到栈中&#xff08…

AI 驱动腾讯游戏智能 NPC,开启新纪元

AI 驱动腾讯游戏智能 NPC&#xff0c;开启新纪元 前言AI 驱动腾讯智能 NPC 前言 曾经&#xff0c;游戏 NPC 往往只是按照预设脚本进行简单互动&#xff0c;缺乏深度和灵活性。然而&#xff0c;如今在 AI 的赋能下&#xff0c;NPC 开始展现出前所未有的智能与活力。它们能够进行…

【springboot】父子工程项目搭建

父工程创建 1.新建一个spring项目 2.选择合适的springboot版本&#xff0c;点击【完成】&#xff0c;即创建父工程完毕 3.删除父工程中无用文件&#xff1a;src 创建子工程模块 1.右键项目名->新建&#xff08;news&#xff09;->模块&#xff08;Module&#xff09;…

web知识

sql注入的万能密码:1’ or true#如果页面没有什么东西可见&#xff0c;首先可以用diresearch看看有没有什么隐藏的目录&#xff0c;或者检查源代码&#xff0c;如果这些都没成功可以用 dirsearch如果没有找到东西&#xff0c;可能需要调低线程 dirsearch.py -u url -e * --ti…

【数据结构与算法】巧用位运算

【数据结构与算法】巧用位运算 文章目录 【数据结构与算法】巧用位运算位运算的巧思用位运算来求集合公式用位移求集合公式二进制库函数 位扩展&#xff1a;基础例题例题LC190——用到左移和或运算异或运算法则经典例题&#xff1a;[LC136 唯一数](https://leetcode.cn/problem…

stm32单片机个人学习笔记3(GPIO输出)

前言 本篇文章属于stm32单片机&#xff08;以下简称单片机&#xff09;的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 STM32入门教程-2023版 细…

基于千问大模型Intel G8i开发主动问询导购助手

文章目录 1. 背景2.环境介绍2.1 硬件环境2.2 软件环境 3. 大模型环境部署3.1 准备硬件资源 3.2 大模型部署3.1 部署Docker3.2 部署Intel xFasterTransformer容器3.3 准备模型数据3.4 运行模型进行AI对话 4. 构建主动问询导购助手应用 1. 背景 北京又开始发放消费券啦&#xff…