当前位置: 首页 > news >正文

element表格的行列动态合并

elementUI表格的行和列进行动态合并

本次需求是,根据后端返回的动态数据,实现表格的行与列的动态合并

在这里插入图片描述
直接粘代码吧

const processDataForMerge = (rawData: TableDataItem[]): TableDataItem[] => {if (!rawData || rawData.length === 0) return []// 优化分组逻辑,使用Map提高查找效率const customerGroups = new Map<string, Map<string, TableDataItem[]>>()// 对数据进行分组rawData.forEach((item) => {const customerKey = item.customerNameconst directionKey = item.saleDirectionNameif (!customerGroups.has(customerKey)) {customerGroups.set(customerKey, new Map())}const directionMap = customerGroups.get(customerKey)!if (!directionMap.has(directionKey)) {directionMap.set(directionKey, [])}directionMap.get(directionKey)!.push(item)})// 构建带小计的数据结构const finalData: TableDataItem[] = []// 遍历客户分组let directionTypeLen = 0let customerNameItem = ''let loopIndex = 0 // 添加外部计数器来跟踪循环次数customerGroups.forEach((directionMap, customerName) => {let customerItemCount = 0 // 记录客户下的实际数据项数量(不包括小计)let customerTotalItems = 0 // 预计算客户下所有数据项数量// 每次循环后递增计数器if (loopIndex === 1) {customerNameItem = customerName}loopIndex++// 预计算客户下的总数据项数,避免嵌套循环directionMap.forEach((items) => {directionTypeLen++customerTotalItems += items.length})// 遍历销售方向分组directionMap.forEach((directionData, directionKey) => {// 使用 reduce 一次性计算汇总数据const { totalWeight, totalVehicles, totalAmount } = directionData.reduce((acc, item) => ({totalWeight: acc.totalWeight + (item.totalWeight || 0),totalVehicles: acc.totalVehicles + (item.totalVehicles || 0),totalAmount: acc.totalAmount + (item.totalAmount || 0)}),{ totalWeight: 0, totalVehicles: 0, totalAmount: 0 })// 添加每个明细行directionData.forEach((item, index) => {// 初始化行合并信息item.customerRowSpan = 0item.directionRowSpan = 0// 对于客户名称列,只在客户的第一个销售方向的第一个数据项设置行合并if (customerItemCount === 0) {item.customerRowSpan = directionTypeLen + customerTotalItems}// 对于销售方向列,每个销售方向的第一个数据项设置行合并if (index === 0 && !item.isSubtotal) {item.directionRowSpan = directionData.length + 1}finalData.push(item)customerItemCount++})// 添加销售方向小计行,使用专门的函数创建finalData.push(createSubtotalRow('direction', {weight: Number(totalWeight.toFixed(2)),vehicles: totalVehicles,amount: Number(totalAmount.toFixed(2))}))})})// 确保序号列连续显示,使用 map 更简洁let currentIndex = 1return finalData.map((item) => ({ ...item, index: currentIndex++ }))
}
var foo = 'bar';
http://www.dtcms.com/a/577048.html

相关文章:

  • C++ 零基础入门与冒泡排序深度实现
  • 鸿蒙harmony将注册的数据包装成json发送到后端的细节及过程
  • JavaWeb(后端进阶)
  • VOC浓度快速测定仪在厂界预警中的实战应用:PID传感器技术与数据分析
  • 【SRE】安装Grafana实践
  • 在 PHP 中打印数据(调试、输出内容)
  • 网站运营有什么用做公司网站需要了解哪些东西
  • 段描述符属性测试
  • Ubuntu安装mysql5.7及常见错误问题
  • 第四届图像处理、计算机视觉与机器学习国际学术会议(ICICML 2025)
  • 网站后台编辑网站开发科普书
  • 单位加强网站建设专门做素菜的网站
  • Rust 在内存安全方面的设计方案的核心思想是“共享不可变,可变不共享”
  • NXP的GUI Guider开发LVGL
  • 《金仓KingbaseES vs 达梦DM:从迁移到运维的全维度TCO实测对比》
  • 【开题答辩全过程】以 基于Java的相机专卖网的设计与实现为例,包含答辩的问题和答案
  • 增量爬取策略:如何持续监控贝壳网最新成交数据
  • 400Hz 橡胶弹性体动刚度扫频试验系统指标
  • Weavefox 携手 GLM-4.6/4.5V 打造新一代智能厨房小助手
  • 如何建立网站后台wordpress 主题 翻译
  • 深入理解 Java 双亲委派机制:JVM 类加载体系全解析
  • Linux 进程间关系与守护进程
  • 基于 Cursor 的智能测试用例生成系统 - 项目介绍与实施指南
  • 时序数据库选型指南:从大数据视角切入,聚焦 Apache IoTDB
  • Node.js 环境变量配置实战:从入门到精通
  • 嵌入式系统入门指南
  • 一次丝滑的内网渗透拿下域控
  • 福建亨利建设集团有限公司网站互展科技网站建设
  • 网页变成PDF下载到本地
  • Spring Boot 3 + Flyway 全流程教程