Element-UI Table 合并单元格导致最后一行高度异常如何解决？

在使用Element-UI的Table组件开发后台管理系统时，合并单元格是常见需求，但不少开发者会发现合并单元格后最后一行高度出现异常，要么高度远大于其他行，要么高度不符合合并后的预期，严重影响表格的展示效果。这种问题大多和合并单元格的逻辑处理、表格默认行高计算规则相关，下面结合实际场景分析并解决。

问题复现与分析

先来看一个常见的合并单元格实现场景，我们需要按照部门合并表格中的行，合并逻辑写在span-method方法中，示例代码如下：

export default {
  data() {
    return {
      tableData: [
        { id: 1, department: '技术部', name: '张三', age: 25 },
        { id: 2, department: '技术部', name: '李四', age: 28 },
        { id: 3, department: '产品部', name: '王五', age: 26 },
        { id: 4, department: '产品部', name: '赵六', age: 27 }
      ],
      spanArr: [] // 存储合并的行数信息
    }
  },
  mounted() {
    this.getSpanArr()
  },
  methods: {
    // 计算需要合并的行
    getSpanArr() {
      this.spanArr = []
      let pos = 0
      for (let i = 0; i < this.tableData.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          pos = 0
        } else {
          if (this.tableData[i].department === this.tableData[i - 1].department) {
            this.spanArr[pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            pos = i
          }
        }
      }
    },
    // 合并单元格方法
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 只合并第一列（部门列）
        const rowSpan = this.spanArr[rowIndex]
        return {
          rowspan: rowSpan,
          colspan: 1
        }
      }
    }
  }
}

对应的表格模板代码如下：

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="department"
        label="部门">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄">
      </el-table-column>
    </el-table>
  </div>
</template>

上述代码在合并部门列时，如果最后一行属于被合并的行（比如示例中产品部的第二行赵六），就会出现最后一行高度异常的问题。原因是当spanArr中最后一项为0时，表格计算最后一行高度时，会默认按照单行高度渲染，而合并逻辑中该行的rowspan为0，导致表格渲染时高度计算出现偏差。

解决方案

方案一：修正合并逻辑，避免最后一行rowspan为0

我们可以在合并逻辑中，对最后一行的处理做特殊判断，确保最后一行不会因为rowspan为0导致高度异常。修改arraySpanMethod方法如下：

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    const rowSpan = this.spanArr[rowIndex]
    // 如果是最后一行且rowSpan为0，说明该行属于被合并的行，不需要额外处理，直接返回
    // 如果不是最后一行，正常返回合并信息
    if (rowIndex === this.tableData.length - 1 && rowSpan === 0) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
    return {
      rowspan: rowSpan,
      colspan: 1
    }
  }
}

这种方案适配大多数场景，只需要调整合并方法的返回逻辑即可，不需要修改其他配置。

方案二：设置表格行高样式，强制统一高度

如果修正逻辑后仍有高度异常，可以给表格的行设置固定高度，覆盖默认的样式计算。在表格上添加行样式绑定：

<el-table
  :data="tableData"
  :span-method="arraySpanMethod"
  :row-style="{ height: '50px' }"
  border
  style="width: 100%">
  <!-- 列配置 -->
</el-table>

这里设置行高为50px，你可以根据实际需求调整数值，这种方式属于兜底方案，适合合并逻辑复杂难以调整的场景。

方案三：检查数据完整性，避免空数据导致的计算偏差

如果表格数据最后一行存在空值或者数据格式异常，也会导致合并计算错误。可以在计算合并数组前先过滤无效数据：

getSpanArr() {
  // 先过滤无效数据
  const validData = this.tableData.filter(item => item.department)
  this.spanArr = []
  let pos = 0
  for (let i = 0; i < validData.length; i++) {
    if (i === 0) {
      this.spanArr.push(1)
      pos = 0
    } else {
      if (validData[i].department === validData[i - 1].department) {
        this.spanArr[pos] += 1
        this.spanArr.push(0)
      } else {
        this.spanArr.push(1)
        pos = i
      }
    }
  }
}

验证方案效果

修改完成后重新运行项目，表格合并单元格后最后一行的高度会和其他合并行保持一致，不会出现异常过高或者过矮的情况。如果仍有问题，可以依次检查合并数组的计算结果、表格的默认样式配置，逐步定位问题点。

需要注意的是，span-method方法的返回值中，rowspan为0表示该单元格被合并，不需要渲染，所以只要保证合并逻辑中数组计算和返回值的匹配，就能避免大部分高度异常问题。

Element_UITable合并单元格行高度异常修改时间：2026-07-05 19:51:13