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

(vue)el-table 怎么把表格列中相同的数据 合并为一行

(vue)el-table 怎么把表格列中相同的数据 合并为一行


效果:

在这里插入图片描述


文档解释:

在这里插入图片描述

写法:

<el-table:data="tableData"size="mini"class="table-class"borderstyle="width:100%"max-height="760":span-method="objectSpanMethod"
>// 合并table单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 1) {  //定位到维度列// 获取当前单元格的值const currentValue = row[column.property];// 获取上一行相同列的值const preRow = this.tableData[rowIndex - 1];const preValue = preRow ? preRow[column.property] : null;// 如果当前值和上一行的值相同,则将当前单元格隐藏if (currentValue === preValue) {return { rowspan: 0, colspan: 0 };} else {// 否则计算当前单元格应该跨越多少行let rowspan = 1;for (let i = rowIndex + 1; i < this.tableData.length; i++) {const nextRow = this.tableData[i];const nextValue = nextRow[column.property];if (nextValue === currentValue) {rowspan++;} else {break;}}return { rowspan, colspan: 1 };}}
},

解决参考:https://blog.csdn.net/qq_42174597/article/details/130602030

http://www.lryc.cn/news/143908.html

相关文章:

  • 精准高效农业作业,植保无人机显身手
  • 大集合拆分成多个小集合
  • linux————LVS集群
  • 软考高级系统架构设计师系列论文七十一:论行业应用软件系统的开发规划
  • vue2 自定义指令,插槽
  • oracle超详细语法和备份工具
  • Redis的持久化机制是什么?各自的优缺点?
  • 机器学习:什么是分类/回归/聚类/降维/决策
  • 算法通关村第5关【白银】| 哈希和栈经典算法题
  • CrystalNet .Net VCL for Delphi Crack
  • 云计算在线实训系统建设方案
  • C++ 珠心算测验
  • prometheus+cadvisor监控docker容器
  • 13、Vue3 大事件管理系统
  • Redis三种特殊数据类型
  • python 模块BeautifulSoup 从HTML或XML文件中提取数据
  • VS Code插件汇总
  • QWidget
  • 【大数据】Linkis:打通上层应用与底层计算引擎的数据中间件
  • 权限提升-数据库提权-MSF-UDF提权
  • 基于XL32F003单片机的可控硅调光方案
  • 【ag-grid-vue】列定义(Updating Column Definitions)
  • mysql sql_mode数据验证检查
  • Prompt召唤 AI “生成”生产力,未来已来
  • 【0day】复现时空智友企业流程化管控系统SQL注入漏洞
  • python编程中fft的优缺点,以及如何使用cuda编程,cuda并行运算,信号处理(推荐)
  • 统计学补充概念-16-支持向量机 (SVM)
  • Python“牵手”天猫商品列表数据,关键词搜索天猫API接口数据,天猫API接口申请指南
  • SQL 错误 [22007]: ERROR: invalid input syntax for type date: ““
  • SpringBootWeb案例 Part 2