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

elementPlus中的el-table实现合并单元格

看下效果:

 1、在el-table上添加属性span-method

2、里面参数的示例如下(平铺的数据即可):

[{"itemResType": "CPU","itemModelType": null,"itemKey": "cpu.cores","itemName": "CPU核数","itemUnit": "核","logicPoolId": 58,"extLogicTotal": 333,"remainValue": 303,"useValue": 30,"quotaValue": 1,"tips": null,"quotaBefore": 1,"totalUseValue": 31},{"itemResType": "MEM","itemModelType": null,"itemKey": "memory.total","itemName": "内存","itemUnit": "Gi","logicPoolId": 58,"extLogicTotal": 2288.1,"remainValue": 2208.1,"useValue": 80,"quotaValue": 1,"tips": null,"quotaBefore": 1,"totalUseValue": 81},{"itemResType": "GPU","itemModelType": "NVIDIA-NVIDIA GeForce RTX 2070","itemKey": "gpu.card","itemName": "GPU卡数","itemUnit": "张","logicPoolId": 58,"extLogicTotal": 3,"remainValue": 1,"useValue": 2,"quotaValue": 1,"tips": "单卡最大显存16Gi","quotaBefore": 1,"totalUseValue": 3},{"itemResType": "GPU","itemModelType": "NVIDIA-GRID P40-1Q","itemKey": "gpu.card","itemName": "GPU卡数","itemUnit": "张","logicPoolId": 58,"extLogicTotal": 3,"remainValue": 1,"useValue": 2,"quotaValue": 1,"tips": "单卡最大显存1Gi","quotaBefore": 1,"totalUseValue": 3},{"itemResType": "NPU","itemModelType": "Ascend910B4","itemKey": "npu.card","itemName": "NPU卡数","itemUnit": "张","logicPoolId": 58,"extLogicTotal": 16,"remainValue": 8,"useValue": 8,"quotaValue": 3.95,"tips": "单卡最大显存256Gi","quotaBefore": 3.95,"totalUseValue": 11.95}
]

 3、合并单元格方法如下(index.ts):

       核心:将key相同的行进行合并,也可以换成你们所选择的id或者name等,只要是唯一标识即可,代码如下

// 合并单元格
export const objectSpanMethod = (data: any[]) => {console.log('----quotaItems---------',data)return ({ row, column, rowIndex, columnIndex }) => {if (columnIndex === 0) { // 只对第一列应用合并规则// 查找相同itemName的起始行let startRow = rowIndexwhile (startRow > 0 && data[startRow - 1].itemKey === row.itemKey) {startRow--}// 计算相同itemName的行数let rowspan = 1while (startRow + rowspan < data.length &&data[startRow + rowspan].itemKey === row.itemKey) {rowspan++}// 如果是相同itemName的第一行,则返回合并行数if (rowIndex === startRow) {return {rowspan: rowspan,colspan: 1}} else {// 非第一行则隐藏单元格return {rowspan: 0,colspan: 0}}}}
}

4、引入公共方法:

5、大功告成,有问题的小伙伴在评论区留言!!

http://www.xdnf.cn/news/15389.html

相关文章:

  • MMKV 存储json list数据(kotlin)
  • 《Linux篇》自动化构建-make/Makefile
  • 自动润滑系统:从 “盲目养护“ 到智能精注的工业运维革命
  • MMaDA:多模态大型扩散语言模型
  • 动态规划题解_将一个数字表示成幂的和的方案数【LeetCode】
  • 互斥锁详解(操作系统os)
  • BERT系列模型
  • 前端工程化-构建打包
  • Flink数据流高效写入MySQL实战
  • Actor-Critic重要性采样原理
  • 九、官方人格提示词汇总(上)
  • 构造函数延伸应用
  • 数据结构 Map和Set
  • 一些git命令
  • SQL预编译:安全高效数据库操作的关键
  • Linux操作系统之信号概念启程
  • 【读书笔记】《C++ Software Design》第七章:Bridge、Prototype 与 External Polymorphism
  • IPC框架
  • [2025CVPR]GNN-ViTCap:用于病理图像分类与描述模型
  • 晋升指南-笔记
  • 【Docker基础】Dockerfile指令速览:环境与元数据指令详解
  • React强大且灵活hooks库——ahooks入门实践之状态管理类hook(state)详解
  • 【C++】多线程同步三剑客介绍
  • AutoLabor-ROS-Python 学习记录——第一章 ROS概述与环境搭建
  • leetGPU解题笔记(1)
  • STM32-第六节-TIM定时器-2(输出比较)
  • 【芯片笔记】ADF4159
  • 【论文阅读】AdaptThink: Reasoning Models Can Learn When to Think
  • 【Java Stream】基本用法学习
  • sql初学见解