(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

相关推荐
浪裡遊25 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
markyankee1012 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
南屿im2 小时前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端2 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军2 小时前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心2 小时前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝2 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
卸任2 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js