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

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.dtcms.com/a/279971.html

相关文章:

  • 从0到1实现Shell!Linux进程程序替换详解
  • 九、官方人格提示词汇总(中-3)
  • Linux基础指令及权限
  • 融合竞争学习与高斯扰动的多目标加权平均算法(MOWAA)求解多无人机协同路径规划(多起点多终点,起始点、无人机数、障碍物可自定义),提供完整MATLAB代码
  • 【地理探测器】解释
  • pip install torch各种版本的命令及地址
  • Java学习——使用jpackage把jar文件打包为可执行的exe文件
  • SnapKit介绍与使用
  • OneCode 3.0: 注解驱动的Spring生态增强方案
  • windows系统中双击.py文件可以直接运行
  • 第 2 章 数据类型及其运算
  • JSCPC 2025 江苏省赛
  • VictoriaMetrics 架构
  • 位置编码类型彩色图解
  • 考虑频率耦合的构网型(GFM)VSG变流器(电压电流双闭环控制结构)的二维序阻抗与降维SISO序阻抗建模详细推导及扫频对比验证
  • 【人工智能99问】什么是深度学习?(2/99)
  • Kimi K2智能体能力的技术突破:大规模数据合成 + 通用强化学习
  • 名片管理系统IV
  • 螺旋模型:风险分析驱动的渐进式开发
  • cuda优化之softmax
  • 组件化思想
  • Brooks 低温泵On-Board Cryopump 安装和维护手法Installation and Maintenance Manual
  • aspnetcore Mvc配置选项中的ModelBindingMessageProvider
  • 第二章 基于新版Onenet搭建云服务(stm32物联网)
  • PyTorch中torch.topk()详解:快速获取最大值索引
  • @Resource 注解的空值处理(默认行为与容器实现)
  • 冲刺阶段项目进度压力大,如何组织高效冲刺
  • 大屏搭建多个图表不自适应问题
  • H264编码结构和解析
  • 第四章 uniapp实现兼容多端的树状族谱关系图,剩余组件