教程：使用 Vue 3 和 arco 实现表格合并

1. 功能概述

本教程将介绍如何使用 Vue 3 和 arco 组件库实现表格合并功能。具体来说，我们会根据表格数据中的某个字段（如 type）对表格的某一列（如入库类型列）进行合并，同时将质检说明列合并为一列。

2. 数据准备

首先，我们需要准备一份数据示例：

import { ref, computed } from 'vue';const storageGoodsVosdata = ref([{id: 1,workOrderId: 'WO001',goodsNo: 'G001',goodsName: 'Test Product 1',skuCode: 'SKU001',skuInfo: 'Color: White; Style: Simple',quantity: 1,type: 0,typeName: 'Defective Incoming',reasonCode: 'R01',reasonCodeStr: 'Label/Certificate/Manual/Missing or Damaged',logisticReceiptsUrls: ['https://example.com/image1.jpg','https://example.com/image2.jpg',],outerPackagingUrls: ['https://example.com/image3.jpg','https://example.com/image4.jpg',],housekeepingDiagramUrls: ['https://example.com/image5.jpg','https://example.com/image6.jpg',],createTime: '2025-02-12 09:43:31',},{id: 2,workOrderId: 'WO001',goodsNo: 'G001',goodsName: 'Test Product 1',skuCode: 'SKU001',skuInfo: 'Color: White; Style: Simple',quantity: 1,type: 0,typeName: 'Defective Incoming',reasonCode: 'R01',reasonCodeStr: 'Label/Certificate/Manual/Missing or Damaged',logisticReceiptsUrls: ['https://example.com/image1.jpg','https://example.com/image2.jpg',],outerPackagingUrls: ['https://example.com/image3.jpg','https://example.com/image4.jpg',],housekeepingDiagramUrls: ['https://example.com/image5.jpg','https://example.com/image6.jpg',],createTime: '2025-02-12 09:43:31',},{id: 3,workOrderId: 'WO001',goodsNo: 'G002',goodsName: 'Test Product 2',skuCode: 'SKU002',skuInfo: 'Color: Black; Style: Modern',quantity: 1,type: 1,typeName: 'Goods Incoming',reasonCode: 'R01',reasonCodeStr: 'Label/Certificate/Manual/Missing or Damaged',logisticReceiptsUrls: ['https://example.com/image7.jpg','https://example.com/image8.jpg',],outerPackagingUrls: ['https://example.com/image9.jpg','https://example.com/image10.jpg',],housekeepingDiagramUrls: ['https://example.com/image11.jpg','https://example.com/image12.jpg',],createTime: '2025-02-12 09:43:31',},{id: 4,workOrderId: 'WO001',goodsNo: 'G002',goodsName: 'Test Product 2',skuCode: 'SKU002',skuInfo: 'Color: Black; Style: Modern',quantity: 1,type: 1,typeName: 'Goods Incoming',reasonCode: 'R01',reasonCodeStr: 'Label/Certificate/Manual/Missing or Damaged',logisticReceiptsUrls: ['https://example.com/image7.jpg','https://example.com/image8.jpg',],outerPackagingUrls: ['https://example.com/image9.jpg','https://example.com/image10.jpg',],housekeepingDiagramUrls: ['https://example.com/image11.jpg','https://example.com/image12.jpg',],createTime: '2025-02-12 09:43:31',},
]);const sortedStorageData = computed(() => {return [...storageGoodsVosdata.value].sort((a, b) => a.type - b.type);
});
3. 表格合并方法

接下来，我们定义一个 spanMethod 函数来处理表格合并逻辑：

function spanMethod({ rowIndex, columnIndex }) {if (columnIndex === 0) { // 只处理第一列（入库类型列）const arr = sortedStorageData.value;const item = arr[rowIndex];// 如果是第一行，或者当前行的类型与前一行不同if (rowIndex === 0 || arr[rowIndex - 1].type !== item.type) {// 计算当前类型的连续行数const count = arr.slice(rowIndex).findIndex(row => row.type !== item.type);return {rowspan: count === -1 ? arr.length - rowIndex : count,colspan: 1,};}// 其他行不显示return {rowspan: 0,colspan: 0,};}// 处理质检说明列（最后一列）if (columnIndex === 8) { // 质检说明列的索引if (rowIndex === 0) {return {rowspan: sortedStorageData.value.length,colspan: 1,};}return {rowspan: 0,colspan: 0,};}
}
模板部分

最后，我们在模板中使用 a-table 组件来渲染表格，并绑定数据和合并方法：

<template><a-table:data="sortedStorageData":bordered="{ cell: true }":pagination="false":span-method="spanMethod"><template #columns><a-table-column title="Incoming Type" data-index="typeName" align="center" :min-width="180"><template #cell="{ record }">{{ record.type === 1 ? 'Goods Incoming' : 'Defective Incoming' }}</template></a-table-column><a-table-columntitle="Product SKU Number"data-index="salary"align="center":min-width="180"><template #cell="{ record }">{{ record.goodsNo }}</template></a-table-column><a-table-columncell-class="custom-col"title="Product Name"data-index="goodsNo"align="center":min-width="180"><template #cell="{ record }"><div class="good-item-wrapper">{{ record.goodsName }}</div></template></a-table-column><a-table-columncell-class="custom-col"title="Quantity"data-index="goodsName"align="center":min-width="180"><template #cell="{ record }"><div class="good-item-wrapper">×{{ record.quantity }}</div></template></a-table-column><a-table-column cell-class="custom-col" title="Defective Reason" data-index="spec" align="center" :min-width="180"><template #cell="{ record }"><div class="good-item-wrapper">{{ record.type === 1 ? '--' : record.reasonCodeStr }}</div></template></a-table-column><a-table-columncell-class="custom-col"title="Logistic Receipts"data-index="quantity"align="center":min-width="180"><template #cell="{ record }"><div class="good-item-wrapper"><div v-show="record.type === 1">--</div><div style="display: flex; gap: 5px;"><a-imagev-for="item in record.logisticReceiptsUrls"v-show="record.type === 0":key="item"width="30":src="item"/></div></div></template></a-table-column><a-table-columncell-class="custom-col"title="Outer Packaging"data-index="quantity"align="center":min-width="180"><template #cell="{ record }"><div class="good-item-wrapper"><div v-show="record.type === 1">--</div><div style="display: flex; gap: 5px;"><a-imagev-for="item in record.outerPackagingUrls"v-show="record.type === 0":key="item"width="30":src="item"/></div></div></template></a-table-column><a-table-columncell-class="custom-col"title="Housekeeping Diagram"data-index="quantity"align="center":min-width="180"><template #cell="{ record }"><div class="good-item-wrapper"><div v-show="record.type === 1">--</div><div style="display: flex; gap: 5px;"><a-imagev-for="item in record.housekeepingDiagramUrls"v-show="record.type === 0":key="item"width="30":src="item"/></div></div></template></a-table-column><a-table-columncell-class="custom-col"title="Quality Inspection Note"data-index="quantity"align="center":min-width="180"><template #cell="{ record }"><div class="good-item-wrapper"><!-- 这里可以替换为实际的质检说明数据 -->质检说明</div></template></a-table-column></template></a-table>
</template><script setup>
import { ref, computed } from 'vue';
import { ATable, ATableColumn, AImage } from 'ant-design-vue';const storageGoodsVosdata = ref([{id: 1,workOrderId: 'WO001',goodsNo: 'G001',goodsName: 'Test Product 1',skuCode: 'SKU001',skuInfo: 'Color: White; Style: Simple',quantity: 1,type: 0,typeName: 'Defective Incoming',reasonCode: 'R01',reasonCodeStr: 'Label/Certificate/Manual/Missing or Damaged',logisticReceiptsUrls: ['https://example.com/image1.jpg','https://example.com/image2.jpg',],outerPackagingUrls: ['https://example.com/image3.jpg','https://example.com/image4.jpg',],housekeepingDiagramUrls: ['https://example.com/image5.jpg','https://example.com/image6.jpg',],createTime: '2025-02-12 09:43:31',},{id: 2,workOrderId: 'WO001',goodsNo: 'G001',goodsName: 'Test Product 1',skuCode: 'SKU001',skuInfo: 'Color: White; Style: Simple',quantity: 1,type: 0,typeName: 'Defective Incoming',reasonCode: 'R01',reasonCodeStr: 'Label/Certificate/Manual/Missing or Damaged',logisticReceiptsUrls: ['https://example.com/image1.jpg','https://example.com/image2.jpg',],outerPackagingUrls: ['https://example.com/image3.jpg','https://example.com/image4.jpg',],housekeepingDiagramUrls: ['https://example.com/image5.jpg','https://example.com/image6.jpg',],createTime: '2025-02-12 09:43:31',},{id: 3,workOrderId: 'WO001',goodsNo: 'G002',goodsName: 'Test Product 2',skuCode: 'SKU002',skuInfo: 'Color: Black; Style: Modern',quantity: 1,type: 1,typeName: 'Goods Incoming',reasonCode: 'R01',reasonCodeStr: 'Label/Certificate/Manual/Missing or Damaged',logisticReceiptsUrls: ['https://example.com/image7.jpg','https://example.com/image8.jpg',],outerPackagingUrls: ['https://example.com/image9.jpg','https://example.com/image10.jpg',],housekeepingDiagramUrls: ['https://example.com/image11.jpg','https://example.com/image12.jpg',],createTime: '2025-02-12 09:43:31',},{id: 4,workOrderId: 'WO001',goodsNo: 'G002',goodsName: 'Test Product 2',skuCode: 'SKU002',skuInfo: 'Color: Black; Style: Modern',quantity: 1,type: 1,typeName: 'Goods Incoming',reasonCode: 'R01',reasonCodeStr: 'Label/Certificate/Manual/Missing or Damaged',logisticReceiptsUrls: ['https://example.com/image7.jpg','https://example.com/image8.jpg',],outerPackagingUrls: ['https://example.com/image9.jpg','https://example.com/image10.jpg',],housekeepingDiagramUrls: ['https://example.com/image11.jpg','https://example.com/image12.jpg',],createTime: '2025-02-12 09:43:31',},
]);const sortedStorageData = computed(() => {return [...storageGoodsVosdata.value].sort((a, b) => a.type - b.type);
});
function spanMethod({ rowIndex, columnIndex }) {if (columnIndex === 0) { // 只处理第一列（入库类型列）const arr = sortedStorageData.value;const item = arr[rowIndex];// 如果是第一行，或者当前行的类型与前一行不同if (rowIndex === 0 || arr[rowIndex - 1].type !== item.type) {// 计算当前类型的连续行数const count = arr.slice(rowIndex).findIndex(row => row.type !== item.type);return {rowspan: count === -1 ? arr.length - rowIndex : count,colspan: 1,};}// 其他行不显示return {rowspan: 0,colspan: 0,};}// 处理质检说明列（最后一列）if (columnIndex === 8) { // 质检说明列的索引if (rowIndex === 0) {return {rowspan: sortedStorageData.value.length,colspan: 1,};}return {rowspan: 0,colspan: 0,};}
}
</script><style scoped>
.custom-col {/* 可以添加自定义样式 */
}.good-item-wrapper {/* 可以添加自定义样式 */
}
</style>
5. 解释
  • 数据排序：使用 computed 计算属性对数据进行排序，确保相同类型的数据相邻。
  • 表格合并逻辑：spanMethod 函数根据列索引和行索引来决定哪些单元格需要合并。对于入库类型列，根据 type 字段合并相同类型的行；对于质检说明列，将所有行合并为一列。
  • 模板渲染：使用 a-table 组件渲染表格，并通过 #columns 插槽定义表格列。每个列可以通过 #cell 插槽自定义单元格内容。

通过以上步骤，你就可以实现一个带有合并单元格功能的表格。

6. 效果

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

位图（C语言版）

位图（C语言版）

文章目录 位图模型基本操作实现代码运行结果 应用存储只有两种状态的数据排序并去重 位图 模型 位图是“位”的数组。 为什么需要构建一个专门的数据结构来表示位的数组&#xff1f;&#xff1a;因为计算机最小的寻址单位是字节&#xff0c;而不是位。 位图是一种内存紧凑的…
阅读更多...
AI写代码工具时代：前端开发技能迭代的挑战与应对

AI写代码工具时代：前端开发技能迭代的挑战与应对

近年来&#xff0c;人工智能&#xff08;AI&#xff09;技术飞速发展&#xff0c;深刻地改变着各个行业&#xff0c;前端开发领域也不例外。AI技术不仅带来了新的开发模式&#xff0c;也显著加快了前端开发技能的迭代速度&#xff0c;给前端工程师带来了巨大的挑战。本文将深入…
阅读更多...
文件上传功能（四）——项目集成

文件上传功能（四）——项目集成

总说 过程参考黑马程序员SpringBoot3Vue3全套视频教程&#xff0c;springbootvue企业级全栈开发从基础、实战到面试一套通关_哔哩哔哩_bilibili 目录 总说 一、功能实现 1.1 Controller层 1.2 测试接口 一、功能实现 我们要将入门程序改为一个工具类 在utils目录下创建A…
阅读更多...
使用 GPT-SoVITS 克隆声音，很详细

使用 GPT-SoVITS 克隆声音，很详细

使用 GPT-SoVITS 克隆声音&#xff0c;很详细 一、前言二、下载三、启动四、克隆声音1、准备克隆音频2、分离人声伴奏3、音频分割4、语音降噪5、ASR工具6、语音文本校对标注工具7、训练模型8、微调训练9、推理 一、前言 最近对文本转语言很感兴趣&#xff0c;但对直接在网站上…
阅读更多...
STM32+Proteus+DS18B20数码管仿真实验

STM32+Proteus+DS18B20数码管仿真实验

1. 实验准备 硬件方面&#xff1a; 了解 STM32 单片机的基本原理和使用方法&#xff0c;本实验可选用常见的 STM32F103 系列。熟悉 DS18B20 温度传感器的工作原理和通信协议&#xff08;单总线协议&#xff09;。数码管可选用共阴极或共阳极数码管&#xff0c;用于显示温度值。…
阅读更多...
【银河麒麟高级服务器操作系统】服务器卡死后恢复系统日志丢失-分析及处理全过程

【银河麒麟高级服务器操作系统】服务器卡死后恢复系统日志丢失-分析及处理全过程

了解更多银河麒麟操作系统全新产品&#xff0c;请点击访问 麒麟软件产品专区&#xff1a;https://product.kylinos.cn 开发者专区&#xff1a;https://developer.kylinos.cn 文档中心&#xff1a;https://document.kylinos.cn 服务器环境以及配置 【机型】 处理器&#xff…
阅读更多...
【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题

【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题

【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题 【承接商业广告，如需商业合作请+v17740568442】 文章目录 【linux】在 Linux 上部署 DeepSeek-r1:32/70b：解决下载中断问题问题描述：解决方法方法一：手动中断并重启下载方法二：使用 Bash 脚本自动化下载在…
阅读更多...
Java(api中常用类,包括Object类,Arrays类,String类,基本数据类型包装类）

Java(api中常用类,包括Object类,Arrays类,String类,基本数据类型包装类）

目录 一.api 1.api介绍: 二.Object类 1.toString方法 2.equals方法 1.什么是equals方法 2.Object类向我们提供的equals方法 ​编辑 3.equals方法与""的区别 三.Arrays类 1.toString方法 2.sort方法 3.copyOf方法 4.fill方法 5.binarySearch方法 四.基…
阅读更多...
物联网行业通识：从入门到深度解析

物联网行业通识：从入门到深度解析

物联网行业通识&#xff1a;从入门到深度解析 &#xff08;图1&#xff1a;物联网生态示意图&#xff09; 一、引言&#xff1a;万物互联时代的到来 根据IDC最新预测&#xff0c;到2025年全球物联网设备连接数将突破410亿&#xff0c;市场规模达1.1万亿美元。物联网&#xff…
阅读更多...
python语言进阶之函数

python语言进阶之函数

目录 前言 函数的创建和调用 函数创建 调用函数 参数传递 形式参数和实际参数 位置参数 数量必须与定义时一致 位置必须与定义时一致 关键字参数 为参数设置默认值 可变参数 **parameter 返回值 变量的作用域 局部变量 全局变量 匿名函数 前言 提到函数&…
阅读更多...
Qt信号槽调用出错：Qt: Dead lock detected while activating a BlockingQueuedConnection

Qt信号槽调用出错：Qt: Dead lock detected while activating a BlockingQueuedConnection

目录 1.现象和原因分析 2. 总结 1.现象和原因分析 就在最近的开发过程中&#xff0c;程序一运行在控制台就打印&#xff1a; Qt: Dead lock detected while activating a BlockingQueuedConnection&#xff1a; 咋一看&#xff0c;怎么出现死锁了呢&#xff1f;仔细看下…
阅读更多...
Linux安装Minio

Linux安装Minio

1、下载rpm包 2、rpm 安装 rpm -ivh xx.rpm3、通过查看minion状态&#xff0c;查看其配置文件位置 systemctl start minio可以根据情况自定义修改配置文件内容&#xff0c;这里暂时不做修改 4、创建数据文件和日志文件&#xff0c;一般在/usr/local/ 5、编写启动脚本 #!/bi…
阅读更多...
计算四个锚点TOA定位中GDOP的详细步骤和MATLAB例程

计算四个锚点TOA定位中GDOP的详细步骤和MATLAB例程

该MATLAB代码演示了在三维空间中，使用四个锚点的TOA（到达时间）定位技术计算几何精度衰减因子（GDOP）的过程。如需帮助，或有导航、定位滤波相关的代码定制需求，请联系作者 文章目录 DOP计算原理MATLAB例程运行结果示例关键点说明扩展方向另有文章： 多锚点Wi-Fi定位和基站…
阅读更多...
基于Spring Boot+Vue的宠物服务管理系统(源码+文档)

基于Spring Boot+Vue的宠物服务管理系统(源码+文档)

项目简介 宠物服务管理系统实现了以下功能&#xff1a; 基于Spring BootVue的宠物服务管理系统的主要使用者分为用户管理模块&#xff0c;由于系统运行在互联网络中&#xff0c;一些游客或者病毒恶意进行注册&#xff0c;产生大量的垃圾用户信息&#xff0c;管理员可以对这些…
阅读更多...
jenkins服务启动-排错

jenkins服务启动-排错

服务状态为active (exited) 且进程不在 查看/etc/rc.d/init.d/jenkins配置 获取配置参数 [rootfy-jenkins-prod jenkins]# cat /etc/rc.d/init.d/jenkins | grep -v #JENKINS_WAR"/usr/lib/jenkins/jenkins.war" test -r "$JENKINS_WAR" || { echo "…
阅读更多...
vue3 分析总结响应式丢失问题原因（二）

vue3 分析总结响应式丢失问题原因（二）

上一篇文件理解了响应式对象应用原理了。公式&#xff1a; 响应式对象 代理 触发器。 但是实际使用结果和预期还是不一致。具体现象是数据修改了&#xff0c;但是并没有实现响应式更新界面。即出现了响应式丢失现象。 一、什么情况下对象的响应式会丢失&#xff1f; 一般网…
阅读更多...
【网络】协议与网络版计算器

【网络】协议与网络版计算器

协议与网络版计算器 文章目录 1.协议的概念 1.1序列化与反序列化 2.网络版计算器 2.1封装套接字2.2协议定制 2.2.1Jsoncpp2.2.2报文处理 2.3会话层&#xff1a;TcpServer2.4应用层&#xff1a;Calculate2.5表示层&#xff1a;Service2.6应用层、表示层和会话层->应用层 …
阅读更多...
C# 添加图标

C# 添加图标

一、前言 为应用程序添加图标是优化用户界面、提升应用辨识度的重要操作。合适的图标能帮助用户快速识别和区分不同应用&#xff0c;增强应用的易用性和专业性。 本指南旨在为你提供详细、易懂的步骤&#xff0c;教你如何为应用程序的窗体添加图标。从图标素材的获取到具体的…
阅读更多...
使用新版本golang项目中goyacc依赖问题的处理

使用新版本golang项目中goyacc依赖问题的处理

背景 最近项目使用中有用到go mod 和 goyacc工具。goyacc涉及到编译原理的词法分析&#xff0c;文法分析等功能&#xff0c;可以用来生成基于golang的语法分析文件。本期是记录一个使用中遇到的依赖相关的问题。因为用到goyacc&#xff0c;需要生成goyacc的可执行文件。 而项目…
阅读更多...
WPS的AI助手进化跟踪(灵犀+插件)

WPS的AI助手进化跟踪(灵犀+插件)

Ver V0.0 250216: 如何给WPS安装插件用以支持其他大模型LLM V0.1 250217: WPS的灵犀AI现在是DeepSeek R1(可能是全参数671B) 前言 WPS也有内置的AI&#xff0c;叫灵犀&#xff0c;之前应是自已的LLM模型&#xff0c;只能说是属于“能用&#xff0c;有好过无”&#xff0c;所…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023