vue.js el-table 动态单元格列合并
一、业务需求:
一个展示列表,表格中有一部分列是根据后端接口动态展示,对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的,则正常展示,如果是’类型2‘的数据,则合并当前数据的动态表格。
二、实现思路:
1、先将普通表格实现,不考虑合并效果;
2、在表格上对要合并的单元格类型进行区分;
3、 在表格上使用:span-method="arraySpanMethod"方法触发表格;
4、在arraySpanMethod方法内接收数据处理合并,确定从哪一列开始合并到哪一列合并结束;
三、代码展示:
<el-tableref="table"size="mini"height="100%":data="tableData":span-method="arraySpanMethod":header-cell-style="{background: '#f5f7fa',fontWeight: 'bold',color: '#303133'}"border><el-table-columntype="index"header-align="center"align="center"label="序号"width="50"></el-table-column><el-table-columnwidth="120"prop="indexShowName"label="名称"show-overflow-tooltip></el-table-column><el-table-columnwidth="80"prop="type"label="类型种类"show-overflow-tooltip><template slot-scope="scope">{{ scope.row.type === '1' ? '类型1' : '类型2' }}</template></el-table-column><el-table-columnv-for="(item, index) in tableColumns":key="index"width="80":label="item.year"show-overflow-tooltip><template slot-scope="scope"><!-- 类型1展示name --><divv-if="scope.row.type === '1'"style="text-align: center">{{scope.row.uploadValueList[index]?.uploadValueName}}</div><!-- 类型2展示value --><div v-else>{{ scope.row.uploadValueList[index].uploadValue }}</div></template></el-table-column><el-table-columnwidth="160"prop="reportDate"label="上报时间"show-overflow-tooltip></el-table-column><el-table-columnwidth="195"label="操作"header-align="center"align="center"fixed="right"><template slot-scope="scope"><el-buttonsize="small"style="color: #409eff; padding: 0"type="text"@click="detailClick(scope.row)">数据明细</el-button></template></el-table-column></el-table>// --------------methods方法--------------------// 右侧表格initTable() {const params = {pageNum: this.pages.pageIndex,pageSize: this.pages.pageSize,}this.tableLoading = true//api接口调用xxxxxx(params).then((res) => {if (res.code === 200) {const { total } = res.result// const { records, total } = res.result//后端接口数据返回形式如下:const records = [{indexShowName: '测试001',type: '1',reportDate: '2023-12-01 15:53:46',uploadValueList: [{id: '1',year: '2021年',uploadValue: '0',uploadValueName: '完全符合'},{id: '2',year: '2022年',uploadValue: '0',uploadValueName: '完全符合'},{id: '3',year: '2023年',uploadValue: '0',uploadValueName: '完全符合'},{id: '4',year: '2024年',uploadValue: '0',uploadValueName: '完全符合'}]},{indexShowName: '测试002',type: '2',reportDate: '2023-12-01 13:45:53',uploadValueList: [{id: '5',year: '2021年',uploadValue: '99.00'},{id: '6',year: '2022年',uploadValue: '98.00'},{id: '7',year: '2023年',uploadValue: '77.00'},{id: '8',year: '2024年',uploadValue: '34.00'}]}]if (records && records.length > 0) {// 使用第一个元素的 uploadValueList 来创建列this.tableColumns = records[0].uploadValueList.map((item) => ({year: item.year, // 使用 year 作为列的标签id: item.id // 用于做key}))}this.tableData = recordsthis.pages.total = total} else {this.$message.error(res.message)}}).finally(() => {this.tableLoading = false})},// 单元格合并 {当前行row、当前列column、当前行号rowIndex、当前列号columnIndex}arraySpanMethod({ row, column, rowIndex, columnIndex }) {// 类型1,且动态数据长度>1if (row.type === '1' && row?.uploadValueList?.length > 1) {const len = row?.uploadValueList?.length// 合并从下标为0开始的【下标为3的第四列,动态数据长度】if ( columnIndex > 2 && columnIndex <= 2 + Number(len) ) {return {rowspan: 1,colspan: columnIndex === 3 ? len : 0}}}},
相关文章:

vue.js el-table 动态单元格列合并
一、业务需求: 一个展示列表,表格中有一部分列是根据后端接口动态展示,对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的,则正常展示,如果是’类型2‘的数据,则合并当前数据的动态表格。…...

word模板导出word文件
前期准备工作word模板 右键字段如果无编辑域 ctrlF9 一下,然后再右键 wps 直接 ctrlF9 会变成编辑域 pom.xml所需依赖 <dependencies> <!--word 依赖--> <dependency><groupId>fr.opensagres.xdocreport</groupId><artifactId…...
debianubuntu的nvidia驱动升级
背景 给出的机器的驱动版本不符合要求,使用自定义的驱动版本。 前置 如果使用nvidia官方的.run安装的驱动包,可以使用系统自带的nvidia-uninstall命令卸载比较方便,不建议使用apt pruge nvidia-*命令删除。会带来其他的问题。 卸载完成之…...

【开源视频联动物联网平台】视频接入网关的用法
视频接入网关是一种功能强大的视频网关设备,能够解决各种视频接入、视频输出、视频转码和视频融合等问题。它可以在应急指挥、智慧融合等项目中发挥重要作用,与各种系统进行对接,解决视频能力跨系统集成的难题。 很多视频接入网关在接入协议…...
【bug排查解决】现象级延迟8-10s
业务背景 最近公司在做物联网相关的项目,调试过程中发现好玩的bug。 首先一个数据采集场景,plc采集数据全链路: kepServer(kepserver IOT gateway) -> emqx (查看日志)-> iot服务 -> 业…...
【人生感悟】不能对一个人太好是有心理学原理的
1、不能对一个人太好是有心理学原理的,当你长期友善对待一个人时,如果这个人认知程度不是很高,层次稍微的偏低,那他可能直接把你的友善理解为理所应当,甚至是你在讨好他,还会把你们之间的关系理解成他是高于…...

动态规划学习——最长回文子序列,让字符串变成回文串的最小插入次数
一,最长回文串 1.题目 给你一个字符串 s ,找出其中最长的回文子序列,并返回该序列的长度。 子序列定义为:不改变剩余字符顺序的情况下,删除某些字符或者不删除任何字符形成的一个序列。 示例 1: 输入&…...
CSS新手入门笔记整理:CSS列表样式
列表项符号:list-style-type 在HTML中,对于有序列表和无序列表的列表项符号,都是使用type属性来定义的。 语法 list-style-type:取值; list-style-type属性是针对ol或者ul元素的,而不是li元素。 有序列表属性 属性值 说明 …...
12月07日,每日信息差
以下是2023年12月07日的11条信息差 第一、社交媒体公司X计划在日本成立应用开发团队 第二、造车进程加快,小米汽车在多地招聘零售门店主管,零售门店主管工作地点涉及武汉、重庆、长沙、郑州、佛山、东莞、厦门等城市 第三、我国西南地区首座百万千瓦级…...

spring mvc理解
spring mvc M:model 模型 V:view 视图 C:controller 控制器 S: service 服务处理 D: Dao 数据持久化 视图 我理解就是web页面,帮助用户调用后端接口。 前后端分离之后,view似乎就和后端没什么关系了。 模型 格式…...

HTML-标签之文字排版、图片、链接、音视频
1、标签语法 HTML超文本标记语言——HyperText Markup Language 超文本是链接标记也叫标签,带尖括号的文本 2、HTML基本骨架 HTML基本骨架是网页模板 html:整个网页head:网页头部,存放给浏览器看的代码,例如CSSbody…...

圣诞将至—C语言圣诞树代码来啦
文章目录 圣诞将至—C实现语言圣诞树源码 圣诞将至—C实现语言圣诞树 圣诞树 源码 #define _CRT_SECURE_NO_WARNINGS#include <stdio.h> #include <math.h> #include <stdlib.h> #include <windows.h> #include <time.h> #define PI 3.14159265…...

Git常用命令#merge分支合并
要查看所有分支,包括本地和远程仓库的分支,可以使用以下命令: 1.查看分支 1.1 查看本地分支 git branch这个命令会列出本地所有的分支,当前所在的分支会有 * 标记。 1.2 查看远程分支 git branch -r这个命令会列出远程仓库的分…...

Windows server 2019 域环境部署
环境准备 准备3台服务器,配置都是8g2核,50g硬盘,操作系统版本Windows Server 2019 Datacenter 域服务器:adc,192.168.56.120服务器1:server1:,192.168.56.121服务器2:server2&…...

Cocos Creator加入图片没有被识别
原因,需要更换类型,选择下图中的类型...

java double类型保留两位小数并去除后面多余的0
public static void main(String[] args) {double value9.100001;//保留两位小数String format String.format("%.2f", value);//去除多余的0String strValue new BigDecimal(format).stripTrailingZeros().toPlainString();System.out.println("strValue &q…...
C++学习寄录(九.多态)
1.多态基本概念 先来看这样的代码,我的本意是想要输出“小猫在说话”,但实际输出的却是“动物在说话”。这是因为地址早绑定,在代码编译阶段就已经确定了函数地址;如果想要实现既定目标,那么这个dospeak(&…...

【Linux基础开发工具】yum生态vim的配置与使用
目录 前言 1. Linux 软件包管理器 yum 1.1 什么是yum 1.2 快速上手yum 1.3 yum生态 2. Linux编辑器vim 2.1 vim的模式 2.2 vim使用技巧 3. vim编辑器辅助功能配置 3.1 配置 3.2 用户sudo权限配置 总结 前言 Linux基础指令与权限之后,Linux系统开发工具的使用…...
java-HashMap、TreeMap、LinkedHashMap、ArrayList、LinkedList使用笔记
背景 Map<String, Integer> unsortedMap new HashMap<>(); unsortedMap.put("One", 1); unsortedMap.put("Two", 2); unsortedMap.put("Three", 3); unsortedMap.put("Four", 4); 一、关于排序 TreeMap&#…...
Oracle中mybatis批量更新报错ORA-00933:SQL命令未正确结束
项目场景: 最近在开发项目的过程中遇见了这个问题:Oracle中批量更新的时候报错 ORA-00933:SQL命令未正确结束 问题描述 mybatis批量更新报错ORA-00933:SQL命令未正确结束 <foreach item"item" index"index&q…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...

Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...

初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)
macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生?别怕,教你轻松起飞! 最近Homebrew更新至最新版,每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...