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

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


效果:


文档解释:

写法:

c 复制代码
<el-table
  :data="tableData"
  size="mini"
  class="table-class"
  border
  style="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

相关推荐
心.c9 分钟前
react当中的this指向
前端·javascript·react.js
Sioncovy23 分钟前
Zustand 源码阅读计划(3)- JS 篇 - Middlewares 中间件逻辑
前端·javascript
多啦C梦a26 分钟前
🪄 这么优雅?`useContext` + 自定义 Hooks:优雅管理全局状态,从主题切换说起
前端·javascript·react.js
患得患失94937 分钟前
【前端】【Echarts】ECharts 词云图(WordCloud)教学详解
前端·javascript·echarts
三年三月41 分钟前
021-顶点法线与反射原理
javascript·three.js
快起来别睡了1 小时前
Vue 3 中的 Watch、WatchEffect 和 Computed:深入解析与案例分析
vue.js
一块plus1 小时前
一门原本只是“试试水”的课程,没想到炸出了一群真诚的开发者
javascript·面试·github
yvvvy1 小时前
🚀React + Vite 实战:打造智能单词学习应用
javascript
盏茶作酒291 小时前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天1 小时前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript