vue3中el-table实现多表头并表格合并行或列
1、el-table中添加事件 :span-method="genderSpanCity"
<el-table :span-method="genderSpanCity":data="data.tableData":fit="true" table-layout="fixed" header-align="center" stripestyle="width:100%;height: 96%;":cell-style="{borderColor:'#aaa'}":header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9',height:'50px'}"v-else><el-table-column :label="$t('wms.dailyProduct')" align="center" height="70px"><el-table-column><el-table-column prop="process" :label="$t('mes.workingProcedure')" width="100" align="center"/><el-table-column prop="item" width="130"/><el-table-column prop="item2" width="150"/></el-table-column><!--二级标题日期--><el-table-column v-for="(name,index) in data.title" :key="name" :label="name" align="center"><!-- 三级标题--><el-table-column v-for="column in data.tableColumns" :key="column.prop":prop="column.prop":label="column.label" align="center"><template #default="scope">{{ scope.row.custom.length > 0 ? scope.row.custom[index][column.prop] : scope.row.custom[column.prop] }}</template></el-table-column></el-table-column></el-table-column></el-table>2、js添加函数
// 合并列
const genderSpanCity = ({row,column,rowIndex,columnIndex
}) => {// 合并前4行的2列与3列for (let i = 0; i < 13; i++) {if (columnIndex === 1 && rowIndex === i) {return {rowspan: 1,colspan: 2}} else if (columnIndex === 2 && rowIndex === i) {return {rowspan: 0,colspan: 0}}}// 合并第4行以后的数据for (let i = 4; i < data.tableData.length; i++) {if (columnIndex > 3 && columnIndex % 2 === 0 && rowIndex === i) {return [1, 3]} else if (columnIndex >= 3 && columnIndex % 2 === 1 && rowIndex === i) {return [0, 0]}}// 合并前两列的数据if (columnIndex === 0 || columnIndex === 1) {// 获取当前单元格的值const currentValue = row[column.property]// 获取上一行相同列的值const preRow = data.tableData[rowIndex - 1]const preValue = preRow ? preRow[column.property] : null// 如果当前值和上一行的值相同，则将当前单元格隐藏if (currentValue === preValue) {return {rowspan: 0,colspan: 0}} else {// 否则计算当前单元格应该跨越多少行let rowspan = 1for (let i = rowIndex + 1; i < data.tableData.length; i++) {const nextRow = data.tableData[i]const nextValue = nextRow[column.property]if (nextValue === currentValue) {rowspan++} else {break}}return {rowspan,colspan: 1}}}
}效果图为
3、数据格式参考：
const data = reactive({// tableData: [// {// process: '混料',// item: '11CAAF02/碳酸钙',// item2: '11CAAF02/碳酸钙',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '混料',// item: '11PVAF03/5型树脂',// item2: '11PVAF03/5型树脂',// custom: '{"本周/This Week": 1 }'// }, {// process: '混料',// item: '11PVAF04/7型树脂',// item2: '11PVAF04/7型树脂',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '混料',// item: '4330AF01/回料',// item2: '4330AF01/回料',// custom: '{"本周/This Week": 1 }'// },// {// process: '挤出',// item: '产出总托数',// item2: '产出总托数',// custom: '{"本周/This Week": 1 }'// }, {// process: '挤出',// item: 'RGV调度次数',// item2: 'RGV调度次数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '挤出',// item: 'ng板数量',// item2: 'ng板数量',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '挤出',// item: '养生区ng板数量',// item2: '养生区ng板数量',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// },// {// process: '',// item: '',// item2: '',// custom: ''// }, {// process: '贴合',// item: '发泡板',// item2: '投料记录',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '贴合',// item: '发泡板',// item2: 'RGV调度次数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '贴合',// item: '上基材',// item2: '投料记录',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '贴合',// item: '上基材',// item2: '上料扫码次数',// custom: '{"本周/This Week": 1}'// }, {// process: '贴合',// item: '码垛',// item2: '产出记录',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '贴合',// item: '码垛',// item2: 'RGV调度次数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '贴合',// item: '汇总数量',// item2: '发泡板',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '贴合',// item: '汇总数量',// item2: '上基材',// custom: '{"本周/This Week": 1}'// },// {// process: '',// item: '',// item2: '',// custom: ''// }, {// process: '锯开检',// item: '贴合大张',// item2: '投料记录',// custom: '{"本周/This Week": 1}'// }, {// process: '锯开检',// item: '贴合大张',// item2: 'RGV调度次数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '锯开检',// item: 'CCD',// item2: '前光电1计数',// custom: '{"本周/This Week": 1}'// }, {// process: '锯开检',// item: 'CCD',// item2: '前光电2计数',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '锯开检',// item: 'CCD',// item2: '后光电计数',// custom: '{"本周/This Week": 1, "其他/Other": "哈哈哈"}'// }, {// process: '锯开检',// item: '汇总数量',// item2: '贴合大张',// custom: '{"本周/This Week": 1}'// }, {// process: '锯开检',// item: '汇总数量',// item2: 'CCD产出',// custom: '{"本周/This Week": 1}'// },// {// process: '',// item: '',// item2: '',// custom: ''// }, {// process: 'PE',// item: '汇总数量',// item2: '投入',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: 'PE',// item: '汇总数量',// item2: '产出',// months: '9月1日',// custom: '{"本周/This Week": 1 }'// },// {// process: '',// item: '',// item2: '',// custom: ''// }, {// process: '打包',// item: '汇总数量',// item2: '投入',// custom: '{"本周/This Week": 1, "上周/Last Week": "哈哈哈"}'// }, {// process: '打包',// item: '汇总数量',// item2: '产出',// custom: '{"本周/This Week": 1 }'// }// ], // 表头数据tableColumns: [],propArr: [],title: [],tableData: []
})
相关文章：
vue3中el-table实现多表头并表格合并行或列
1、el-table中添加事件 :span-method"genderSpanCity" <el-table :span-method"genderSpanCity":data"data.tableData":fit"true" table-layout"fixed" header-align"center" stripestyle"width:100%;he…...
Selenium 八大元素定位方法及场景扩展
Selenium 提供了八种常见的元素定位方法，用于在网页中准确找到需要操作的元素。以下是详细介绍以及一些特殊场景的解决方案。 1. ID 定位 用法： 通过元素的唯一 id 属性进行定位。 element driver.find_element(By.ID, "element_id")使用场…...
计算机网络之---网络拓扑
什么是网络拓扑 为什么需要网络拓扑 网络拓扑有哪些 什么是网络拓扑 网络拓扑 是指网络中各设备（如计算机、路由器、交换机等）如何连接以及它们之间数据流动的结构和布局。它是网络设计的一个关键方面，决定了网络的性能、可扩展性、可靠性…...
YOLO11新王登基！实战改进版，杀穿顶会！
众所周知，YOLO一直是发论文的大热门！而YOLO11做为其的最新版本，必然会在2025成为各大顶会的“宠儿”！ 主要在于：一方面，YOLO其他系列的改进早已卷成“红海”，而YOLO11提出才几个月，…...
【《游戏编程模式》实战04】状态模式实现敌人AI
目录 1、状态模式 2、使用工具 3、状态模式适用范围 4、实现内容 5、代码及思路 Enemy.cs EnemyState.cs 6、unity里的设置 7、运行效果展示 1、状态模式 “允许一个对象在其内部状态改变时改变自身的行为。对象看起来好像是在修改自身类。” 就是一个对象能随着自己…...
Linux 环境（Ubuntu）部署 Hadoop 环境
前置准备 准备三台机器 cat /etc/hosts 192.168.1.7 hadoop-master 192.168.1.11 hadoop-slave01 192.168.1.12 hadoop-slave02Linux 环境 cat /etc/os-release PRETTY_NAME"Ubuntu 24.10" NAME"Ubuntu" VERSION_ID"24.10" VERSION"24.…...
裸机器搭建k8s部署 1.28.10版本
问了搭建k8s集群踩了很多坑，问题主要出现在网络插件处，因此主要是master节点操作问题。重新走一下流程整理一下笔记。 目录 虚拟机准备 虚拟机 系统版本信息 修改镜像地址 配置静态ip 关闭防火前和交换分区 转发 IPv4 并让 iptables 看到桥接流量…...
np.ndarray 是 NumPy 库中的核心数据结构
np.ndarray 是 NumPy 库中的核心数据结构，代表一个多维数组（或称为矩阵）。它是一个高效的容器，用于存储和操作数据，可以包含任意类型的数据（整数、浮点数、布尔值等）。 主要特点： …...
全新免押租赁系统打造便捷安全的租赁体验
内容概要 全新免押租赁系统的推出，标志着租赁行业的一次重大变革。这个系统的最大特点就是“免押金”，大大减轻了用户在租赁过程中的经济负担。从此，不再需要为一部手机或其他商品支付高昂的押金，用户只需通过简单的信用评估&…...
C语言——结构体,位段,枚举和联合
目录 前言 结构体 1含义 2语法 3匿名结构体 4结构体自引用 5结构体的定义与初始化 6内存对齐 7修改对齐数 8结构体传参 位段 1含义 2位段的内存分配 编辑3位段的问题 4位段的应用 枚举 1含义 2定义 3枚举优点 4枚举使用 联合 1含义 2定义 3特点 4计…...
现场展示deepseek VS openAI o1模型大对比
DeepSeek-V3 模型的发布在 AI 领域引起了广泛关注。作为一款拥有 6850 亿参数的混合专家（MoE）语言模型，DeepSeek-V3 在多个基准测试中表现出色，甚至超越了一些闭源模型。其在 Aider 代码能力排行榜上的正确率达到 48.4%࿰…...
深度解析 tanh tanh 激活函数
1. 引言 在现代深度学习中，激活函数（Activation Function）是神经网络的核心组件之一。它的主要作用是引入非线性，从而使神经网络能够学习和表示复杂的非线性关系。如果没有激活函数，神经网络的输出将只是输入的线性组…...
【Golang 面试题】每日 3 题（二十五）
✍个人博客：Pandaconda-CSDN博客 📣专栏地址：http://t.csdnimg.cn/UWz06 📚专栏简介：在这个专栏中，我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话，欢迎点赞👍收藏…...
Unity Canvas中显示粒子特效
首先在场景中新建一个粒子特效 修改一下参数 1.改变粒子特效的渲染层级，层级修改为UI层，由UI相机渲染 使用粒子特效的Sorting Layer ID和Order In Layer，Sorting Layer ID设置为UI（如果没有UI层则新建就好了），对UI进行排序 对于要显示在前的UI组件添加Canvas组件，设置O…...
excel精简使用工具
1.获取sheet1的行填充到sheet2的列 希望在 Excel 中使用 INDEX 函数从不同的列中提取数据，并且每一行都引用不同的列。为了实现这个目标，你可以使用 COLUMN 函数来动态获取列的偏移量。 为了避免手动输入每个单元格的公式，你可以使用以下公…...
上手体验微软全新整合的王炸平台Fabric
体验确实不错，微软强大的生态能力。 把可视化，数仓，数据胡，数据工厂，机器学习，数据监控等技术都整合到一个平台了。所有数据全都存储在统一的one lake数据中心，消除数据孤岛问题。而且不同角色可…...
Linux 下 Vim 环境安装踩坑问题汇总及解决方法（重置版）
导航 安装教程导航 Mamba 及 Vim 安装问题参看本人博客：Mamba 环境安装踩坑问题汇总及解决方法（初版）Linux 下Mamba 及 Vim 安装问题参看本人博客：Mamba 环境安装踩坑问题汇总及解决方法（重置版）Windows …...
RabbitMQ 可观测性最佳实践
RabbitMQ 简介 RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写，支持多种客户端。它通过使用交换机（Exchanges）、队列（Queues）和绑定（Bindings）来路由消息ÿ…...
束搜索、组束搜索介绍、异同及相关参数
束搜索（Beam Search）与组束搜索（Group Beam Search）介绍 束搜索（Beam Search） 束搜索是一种用于序列生成任务的解码算法，广泛应用于自然语言处理领域，如机器翻译、语音识别等。它的…...
)
深度学习与计算机视觉 (博士)
文章目录 零、计算机视觉概述一、深度学习相关概念1.学习率η2.batchsize和epoch3.端到端(End-to-End)、序列到序列(Seq-to-Seq)4.消融实验5.学习方式6.监督学习的方式(1)有监督学习(2)强监督学习(3)弱监督学习(4)半监督学习(5)自监督学习(6)无监督学习(7)总结：不同…...
新时期下k8s 网络插件calico 安装
1、k8s master节点初始化完毕以后一直处于notreadey状态，一直怀疑是安装有问题或者是初始化有问题（当然，如果真有问题要先解决这些问题），经过不断探索才发现是网络插件没有安装导致的，根据建议安装calico插…...
14：00面试，15：00就出来了，问的问题过于变态了。。。
从小厂出来，没想到在另一家公司又寄了。 到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到2月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...
Improving Language Understanding by Generative Pre-Training GPT-1详细讲解
Improving Language Understanding by Generative Pre-Training 2018.06 GPT-1 0.有监督、半监督、无监督 CV：ImageNet pre-trained model NLP：pre-trained model? 在计算机视觉中任务包含分类、检测、分割，任务类别数少，对应…...
Docker: 现代开发的利器，从入门到实践
引言 在现代软件开发中，开发人员面对的环境多种多样，不同操作系统、依赖、库版本等都会影响应用程序的正常运行。传统的开发和部署流程复杂且易错，"在我机器上可以跑"的困扰让许多开发者头疼。而 Docker，一个容器化技术…...
nuxt3 env环境变量
加载env文件 在package.json中指定运行某个env文件：nuxt build --dotenv .env.production 具体如下： "scripts": {"build-dev": "nuxt build --dotenv .env.test","build-prd": "nuxt build --dotenv .e…...
)
Vue3 自定义插件(plugin)
文章目录 Vue3 自定义插件(plugin)概述用法 Vue3 自定义插件(plugin) 概述 插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。 用法 Vue3 插件有2种定义方式： 对象形式。对象中有install方法。函数形式。函数本身就是安装方法，其中ÿ…...
HTB：Bank[WriteUP]
目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 提取出靶机TCP开放端口 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用curl对域名进行访问…...
Elastic-Job相关
文档参考视频：09_SpringBoot案例演示_哔哩哔哩_bilibili 一、Elastic-Job介绍 Elastic-Job 是一个轻量级、分布式的任务调度框架，旨在解决分布式环境下的定时任务调度问题。 1.1. Elastic-Job 的核心组件 Elastic-Job 是由多个核心组件构成的&#x…...
Ruby语言的正则表达式
Ruby语言的正则表达式详解 正则表达式（Regular Expressions，简称Regex）是一种强大的文本处理工具，它可以用来匹配、搜索、替换字符串中的模式。在Ruby语言中，正则表达式的使用非常灵活，并且具有良好的可读…...
“深入浅出”系列之QT：（5）Json数据格式处理详解
一、JSON数据结构 JSON主要有两种数据结构：JSON对象和JSON数组。 JSON对象：由键值对组成，每个键（key）是字符串，值（value）可以是字符串、数字、布尔值、null、JSON数组或JSON对象。对…...
cursor试用出现：Too many free trial accounts used on this machine 的解决方法
文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons：JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram，自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 ？ 5 IDEA必装的插件&…...
Calico BGP网络问题
Calico BGP网络问题 文章目录 Calico BGP网络问题排除步骤calico-node 正常运行，但在 describe 中有警告信息错误现象 ip route 路由表中删除 blackhole后又会自动生成网卡选择无效导致 calico 的 pod 内容器未就绪问题现象原因分析问题解决方式一：直接修…...
Jenkins-部署-windows
Jenkins-部署-windows 一: Jenkins 资料 一: Jenkins 资料...
benchANT 性能榜单技术解读 Part 1：写入吞吐
近期，国际权威数据库性能测试榜单 benchANT 更新了 Time Series: Devops（时序数据库）场景排名，KaiwuDB 数据库在 xsmall 和 small 两类规格下的时序数据写入吞吐、查询吞吐、查询延迟、成本效益等多项指标刷新榜单原有数据纪录。在…...
【 算法设计与分析-回顾算法知识点】福建师范大学数学与计算机科学学院 2006 — 2007学年第二学期考试 A 卷
一．填空题（每空2分，共30分） 1．算法的时间复杂性指算法中 元运算 的执行次数。 2．在忽略常数因子的情况下，O、和三个符号中， O 提供了算法运行时间的一个上界。 3．设Dn…...
【25考研】川大计算机复试情况，重点是啥？怎么准备？
24年进入复试的同学中，有10位同学的复试成绩为0分。具体是个人原因还是校方原因，还尚不明确。但是C哥提醒，一定要认真复习！复试完后不要跟任何人讨论有关复试的题目及细节！ 一、复试内容 四川大学复试内容较多…...
设计模式-结构型-适配器模式
在软件开发中，随着系统的不断扩展和模块的不断增加，往往会遇到不同模块之间接口不兼容的情况。此时，如果我们能通过某种方式将一个接口转化为另一个接口，那么开发工作将变得更加灵活和高效。适配器模式（Adapter Patter…...
el-table表格合并某一列
需求：按照下图完成单元格合并，数据展示 可以看到科室列是需要合并的 并加背景色展示；具体代码如下： <el-tableref"tableA":data"tableDataList":header-cell-style"{ backgroundColor: #f2dcdb, col…...
分布式Id方案选择
分布式 ID 方案选择 在当今分布式系统日益盛行的背景下，分布式 ID 生成方案的选择成为了众多开发者关注的焦点。一个优秀的分布式 ID 方案，不仅能够确保生成的 ID 全局唯一，避免数据冲突，还能在高并发、大规模的分布式环境中保持…...
uni app 写的 小游戏，文字拼图？文字拼写？不知道叫啥
从下方的偏旁部首中选在1--3个组成上面文章中的文字，完成的文字标红 不喜勿喷 《满江红》 其中用到了两个文件 strdata.json parameters.json 这两个文件太大 放到资源中了 资源文件 <template><view class"wenzi_page_main"><view c…...
【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. 如果你想在项目工程上操作，又发现项目工程并没导入Tools，可以从xLua-master工程拷贝到项目工程Assets…...
Yolo11改进：注意力改进|Block改进|ESSAformer，用于高光谱图像超分辨率的高效Transformer|即插即用
摘要 一、论文介绍 高光谱图像超分辨率的重要性：高光谱成像技术通过密集采样光谱特征，为材料区分提供丰富的光谱和空间结构信息，广泛应用于各领域。高光谱图像超分辨率（HSI-SR）旨在从低分辨率HSI生成高分辨率HSI。传统方法的局限性：传统方法依赖手工制作的先验，如低秩近…...
第二十八周学习周报
目录 摘要Abstract1 GFPGAN1.1 总体结构1.2 实验研究1.3 代码分析 总结 摘要 本周主要的学习内容是GFPGAN模型。GFPGAN是一种基于生成对抗网络(GAN)的模型，其利用封装在预训练的人脸GAN中的丰富多样的先验进行人脸图像的修复。这种生成面部先验（GFP&…...
太速科技-418-基于AD9361 +ZYNQ7020 的软件无线电 SDR 套件
基于AD9361 ZYNQ7020 的软件无线电 SDR 套件 一、板卡信息 ● ZYNQ芯片采用XC7Z020，逻辑容量更大，支持更大的逻辑设计； ● 内存采用两片512M DDR3，共1GByte，更大容量。 ● 支持千兆网口，支持ZEDFMCO…...
STM32裸机开发转FreeRTOS教程
目录 1. 简介2. RTOS设置（1）分配内存（2）查看任务剩余空间（3）使用osDelay 3. 队列的使用（1）创建队列（1）直接传值和指针传值（2）发送/接收…...
swagger导出json
要将 Swagger（或者 OpenAPI）文档导出为 JSON 文件，通常有几种常见的方法，具体取决于你使用的 Swagger 工具（如 Swagger UI、Swagger Editor、Swagger Hub 等）。下面列出了几种常见的导出 JSON 文件的方法。 1. 通过 Swagger UI 导出 JSON 文件 如果你在使用 Swagger UI…...
大纲笔记幕布的替换
文章目录 前言类似的大纲软件探索 DynalistLogseq通过国内代码仓库建立 Git 仓库Logseq 的使用PC 端安卓端Git 操作Termux git 步骤Termux 的桌面组件：Termux widget 报错参考 前言 之前我一直用幕布，买了三年，奈何要过期了，又三…...
【Excel/WPS】根据平均值，生成两列/多列指定范围的随机数/随机凑出两列数据
原理就是通过随机生成函数和平均值函数。 适用场景：在总体打分后，需要在小项中随机生成小分数 第一列：固定的平均值A2第二列： RANDBETWEEN(A2-10,A210)第三列：根据第二列用平均值函数算除 A2*2-B2这是随机值1的公式&am…...
单元测试MockitoExtension和SpringExtension
1. MockitoExtension MockitoExtension 是 JUnit 5 提供的一个扩展，用于支持 Mockito 的集成。它可以自动初始化标记为 Mock、InjectMocks 等的 Mockito 对象，而不需要显式调用 MockitoAnnotations.initMocks(this)。 主要特点: 自动初始化 Mock、Spy…...
springboot+vue使用easyExcel实现导出功能
vue部分 // 导出计算数据exportDataHandle(id) {this.$http({url: this.$http.adornUrl(/xxx/xxx/exportCalDataExcel),method: post,data: this.$http.adornData({id: id}),responseType: blob, // 重要：告诉axios我们希望接收二进制数据}).then(({data}) > {c…...