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…...
HTML+CSS+JS制作中国传统节日主题网站(内附源码,含5个页面)
一、作品介绍 HTMLCSSJS制作一个中国传统节日主题网站,包含首页、节日介绍页、民俗文化页、节日活动页、联系我们页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。 二、页面结构 1. 顶部横幅区 包含传统中国风格的网站标题中国传统…...
时空笔记:CBEngine(微观交通模拟引擎)
CBEngine 是一个微观交通模拟引擎,可以支持城市规模的道路网络交通模拟。CBEngine 能够快速模拟拥有数千个交叉路口和数十万辆车辆的道路网络交通。 以下内容基本翻译自CBEngine — CBLab 1.0.0 documentation 1 模拟演示 1.0 模拟演示结构 config.cfg 定义了 roa…...
【LeetCode】力扣刷题热题100道(26-30题)附源码 轮转数组 乘积 矩阵 螺旋矩阵 旋转图像(C++)
目录 1.轮转数组 2.除自身以外数组的乘积 3.矩阵置零 4.螺旋矩阵 5.旋转图像 1.轮转数组 给定一个整数数组 nums,将数组中的元素向右轮转 k 个位置,其中 k 是非负数。 class Solution { public:void rotate(vector<int>& nums, int k) …...
【C++】字符串的 += 和 + 运算详解
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯1. 字符串的 和 基本用法1.1 的用法1.2 的用法 💯2. 示例代码的剖析与解释代码分析 💯3. 底层实现与性能分析3.1 的实现原理3.2 的实现原理3.…...
多模态大模型部署:结合dify
文章目录 前言minicpm-vDify测试一下总结部署过程回顾集成与测试实验结果分析展望未来 前言 上回说道,我们用ollama部署了一个多模态的大模型,也就是minicpm-v: 但这玩意儿感觉只能打字啊。 怎么给它发图片呢? minicpm-v Mini…...
Matlab Steger提取条纹中心(非极大值抑制)
文章目录 一、简介二、实现代码三、实现效果一、简介 由于在确定条纹的ROI区域之后,会计算出多个条纹中心坐标,因此这里就需要对其进行则优选择,毕竟条纹只有一条,这最简单的方式就是使用非极大值抑制,即选择每一行/列最好的条纹中心。 二、实现代码 Hessian2D.m function…...
springboot + vue+elementUI图片上传流程
1.实现背景 前端上传一张图片,存到后端数据库,并将图片回显到页面上。上传组件使用现成的elementUI的el-upload。、 2.前端页面 <el-uploadclass"upload-demo"action"http://xxxx.xxx.xxx:9090/file/upload" :show-file-list&q…...
LabVIEW 系统诊断
LabVIEW 系统诊断是指通过各种工具和方法检测、评估、分析和解决 LabVIEW 程序和硬件系统中可能存在的故障和性能问题。系统诊断不仅涵盖软件层面的调试与优化,还包括硬件交互、数据传输、实时性能等方面的检查和分析。一个成功的系统诊断能够显著提升LabVIEW应用程…...
韩国机场WebGIS可视化集合Google遥感影像分析
目录 前言 一、相关基础数据介绍 1、韩国的机场信息 2、空间数据准备 二、Leaflet叠加Google地图 1、叠加google地图 2、空间点的标记及展示 3、韩国机场空间分布 三、相关成果展示 1、务安国际机场 2、有同类问题的机场 四、总结 前言 12月29日8时57分左右务安国际机…...
springCloudGateWay使用总结
1、什么是网关 功能: ①身份认证、权限验证 ②服务器路由、负载均衡 ③请求限流 2、gateway搭建 2.1、创建一个空项目 2.2、引入依赖 2.3、加配置 3、断言工厂 4、过滤工厂 5、全局过滤器 6、跨域问题...
使用new Vue创建Vue 实例并使用$mount挂载到元素上(包括el选项和$mount区别)
new Vue({...}) 是创建一个新的 Vue 实例的方式。你可以通过传递一个选项对象来配置这个实例。常见的选项包括: •data:定义组件的数据属性。 •el:指定 Vue 实例应该挂载到哪个 DOM 元素上(通常是一个选择器字符串,如…...
GTX750Ti打DP补丁
背景 咸鱼收了一个二手的GTX750Ti,用于4K60Hz显示器,HDMI接口勉强可以4K60Hz,不过色彩和帧率都不是太正常,理论上它的HDMI接口是不支持的,原本也是打算用DP接口接显示器的,但是发现接DP口之后无法通过bios的vga检测最终一直重启,在华硕B760-K的BIOS中使能CSM是可以使用…...
springmvc前端传参,后端接收
RequestMapping注解 Target({ElementType.METHOD, ElementType.TYPE}) Retention(RetentionPolicy.RUNTIME) Documented Mapping public interface RequestMapping {String name() default "";AliasFor("path")String[] value() default {};AliasFor(&quo…...
PyTorch 张量的分块处理介绍
分块处理是将大型张量分解成较小的块,以便更高效地进行计算,减少内存占用,特别适用于处理超大张量的场景(如深度学习中的大批量数据或大型模型训练)。 PyTorch 提供了多种方法来分块张量,包括 chunk、spli…...
在Ubuntu中使用systemd设置后台自启动服务
引言 在Ubuntu系统中,systemd 是一个非常强大的系统和服务管理器。它不仅负责系统的启动和初始化,还可以帮助我们管理各种后台服务。通过使用 systemd,我们可以轻松地设置服务在系统启动时自动运行,并且能够方便地管理服务的启动…...
mongodb清理删除历史数据
批量清理mongodb历史数据 清理程序的原来 目前项目组上很多平台上线历史数据积压,导致入库查询数据缓慢,历史数据有些已经归档,进行历史数据清理删除。 之前临时写shell脚本,太简陋,重新使用Python进行改造,…...
C++字体库开发之字体回退策略十六
回退表 { "blocks": [ "UBLOCK_BASIC_LATIN", ], "font": { "family": "Noto Sans SC", "style": [ { "name": "Thin", …...
IO进程day3
一、思维导图 二、作业1 使用C语言编写一个简易的界面,界面如下 1:标准输出流 2:标准错误流 3:文件流 要求:按1的时候,通过printf输出数据,按2的时候,通过perror输出数据,…...
【多线程初阶篇¹】线程理解| 线程和进程的区别
目录 一、认识线程Thread 1.为啥引入线程 2.线程理解 🔥 3.面试题:线程和进程的区别 一、认识线程Thread 1.为啥引入线程 为了解决进程太重量的问题 解释(为什么说线程比进程更轻量?/为什么说线程创建/销毁开销比进程小&#…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
(转)什么是DockerCompose?它有什么作用?
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器。 Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
多模态大语言模型arxiv论文略读(108)
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题:CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者:Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
c++第七天 继承与派生2
这一篇文章主要内容是 派生类构造函数与析构函数 在派生类中重写基类成员 以及多继承 第一部分:派生类构造函数与析构函数 当创建一个派生类对象时,基类成员是如何初始化的? 1.当派生类对象创建的时候,基类成员的初始化顺序 …...
Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成
一个面向 Java 开发者的 Sring-Ai 示例工程项目,该项目是一个 Spring AI 快速入门的样例工程项目,旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计,每个模块都专注于特定的功能领域,便于学习和…...
