(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

相关推荐
aidingni8881 分钟前
保护你的前端:打造数字堡垒的艺术
前端·javascript
桜吹雪3 分钟前
15 个可替代流行 npm 包的 Node.js 新特性
javascript·后端
鹏多多7 分钟前
使用React-OAuth进行Google/GitHub登录的教程和案例
前端·javascript·react.js
苏打水com33 分钟前
JavaScript 企业面试与学习难度拆解:从0到中高级的阶梯式路线图
javascript
晓得迷路了35 分钟前
栗子前端技术周刊第 101 期 - React 19.2、Next.js 16 Beta、pnpm 10.18...
前端·javascript·react.js
艾小码2 小时前
前端人必看!3个技巧让你彻底搞懂JS条件判断与循环
前端·javascript
灵感__idea9 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
excel10 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
苏打水com13 小时前
JavaScript 入门学习指南:从零基础到能写交互效果
javascript
大前端helloworld13 小时前
前端梳理体系从常问问题去完善-框架篇(Vue2&Vue3)
前端·javascript·面试