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

el-table合并单元

1、data中定义两个字段

spanArr: [], // 用于存储每个单元格的 rowspan 和 colspan

pos: 0,      // 用于记录当前合并单元格的起始位置

2、methods中声明两个方法

getSpanArr(data) {this.spanArr = [];this.pos = 0;for (let i = 0; i < data.length; i++) {if (i === 0) {this.spanArr.push(1);this.pos = 0;} else {if (data[i].pumpType === data[i - 1].pumpType) {this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}}
},// 合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if ([1, 2, 7, 8, 9, 10].includes(columnIndex)) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col;}
}

3、从接口获取到表格数据后,立即调用this.getSpanArr(this.tableData);方法,并且

4、最终效果:

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

相关文章:

  • 【基础知识】李雅普诺夫方程与李雅普诺夫函数
  • 985高校查重率“隐性阈值”:低于5%可能被重点审查!
  • 从艾米・阿尔文看 CTO 的多面特质与成长路径
  • 英皇娱乐X乐华娱乐携手造星!“英皇乐华青少年艺人培训班”正式启动!
  • 深度学习-159-综述之混合专家模型和推理模型以及工作流和智能体的概念
  • Elastic:如何构建由 AI 驱动的数字客户体验策略
  • 计算机网络-LDP工作过程详解
  • 代码随想录算法训练营第60期第三十天打卡
  • C++之set和map的运用
  • MySQL 数据库
  • AI人工智能在交通物流领域的应用
  • web 自动化之 Selenium 元素定位和浏览器操作
  • 探索 C++ 在行业应用与技术融合中的核心价值
  • Baklib构建AI就绪知识管理体系
  • 湖北理元理律师事务所的企业债务重组实践:挽救实体经济的法律处方
  • B站pwn教程笔记-8
  • 验证码(笔记)
  • IndoorLink 新一代旗舰电子讲解器,四大革新技术开启破冰之旅
  • Spring AI 入门(持续更新)
  • RDD实现单词计数
  • mybatis-plus-join-boot-starter依赖解决 Join 联表查询
  • Linux复习笔记(二) 网络服务配置(samba /DNS)
  • DeepSeek+Kimi实战:PPT制作教程
  • 多智能体学习CAMEL-调用api
  • 阀门产业发展方向报告(石油化工阀门应用技术交流大会)
  • Linux 常用命令 - tftp【简单文件传输协议】
  • 超大规模SoC后仿真流程与优化
  • python 接收c++的.so传的jsoncpp字符串
  • springBoot2集成mybatis (手敲学习版)java入门友好
  • 网络原理初识