el-table合并表头，合并数据相同的单元格

TomBlibe

已于 2023-07-20 15:52:04 修改

阅读量917

点赞数 2

文章标签： vue.js javascript 前端

于 2023-07-07 17:02:36 首次发布

本文链接：https://blog.csdn.net/TomBlibe/article/details/131600656

版权

这篇文章展示了如何在Vue.js中使用ElementUI的el-table组件进行复杂表格操作，包括通过header-cell-style属性处理表头合并，以及利用span-method属性实现当数据相同单元格的自动合并。关键点在于handerMethod和mergeSub两个方法的实现，它们分别用于处理表头的显示和数据行的合并。

摘要由CSDN通过智能技术生成

部分代码

<el-table
              ref="tableRef"
              border
              :data="entryEntity"
              style="width: 100%; margin-bottom: 20px"
              height="500px"
              :header-cell-style="handerMethod"
              :span-method="mergeSub"
            >
              <el-table-column
                prop="subName"
                label="子公司"
                align="center"
                width="120"
              />
              <el-table-column
                prop="productTypeName"
                label="子公司"
                align="center"
                width="120"
              />
.......

</el-table>

合并表头：

:header-cell-style="handerMethod" //合并表头用这个

// 隐藏表头
    handerMethod({ row, column, rowIndex, columnIndex }) {
      if (row[0].level === 1) {
        // 这里有个非常坑的bug 必须是row[0]=0 row[1]=2才会生效
        row[0].colSpan = 0
        row[1].colSpan = 2
        if (columnIndex === 0) {
          return { display: 'none' }
        }
      }
    },

合并数据相同的单元格：

:span-method="mergeSub" //合并数据相同的单元格

mergeSub({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 获取当前单元格的值
        const currentValue = row[column.property]
        // 获取上一行相同列的值
        // 这里的entryEntity是表格里的数据
        const preRow = this.entryEntity[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.entryEntity.length; i++) {
            const nextRow = this.entryEntity[i]
            const nextValue = nextRow[column.property]
            if (nextValue === currentValue) {
              rowspan++
            } else {
              break
            }
          }
          return { rowspan, colspan: 1 }
        }
      }
    },