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

Element UI是Vue生态中常用的UI组件库，其中的el-table组件支持单元格合并功能，但在实际使用中，不少开发者会发现合并单元格后最后一行经常出现高度异常的情况，比如高度远高于其他行、内容被截断或者出现空白区域。这种问题会影响表格的展示效果，需要针对性排查处理。

问题产生的原因

el-table的单元格合并是通过span-method方法实现的，表格的行高默认会根据内容自动计算，当出现以下情况时就容易引发最后一行高度异常：

• 合并逻辑中最后一行的行高计算没有和前面的行保持一致，导致表格自动计算高度时出现偏差
• 合并后最后一行的单元格没有实际内容，表格的自动高度计算逻辑无法正确获取行高参考值
• 全局或者局部的表格样式覆盖了默认行高设置，导致最后一行样式异常
• 动态更新表格数据后，合并逻辑没有重新适配，最后一行的合并参数计算错误

解决方案

方案一：调整span-method的合并逻辑

首先检查合并方法的实现，确保最后一行的合并参数计算正确，避免出现合并行数错误的情况。以下是一个标准的合并方法示例：

// 合并单元格的方法
export function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  // 假设要合并第一列，每两行合并一次
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
}

如果最后一行是单独的奇数行，上面的逻辑会让最后一行的第一列返回{rowspan: 0, colspan: 0}，此时需要额外处理最后一行的合并参数，避免表格计算高度时出错。可以修改逻辑如下：

export function objectSpanMethod({ row, column, rowIndex, columnIndex }, tableData) {
  if (columnIndex === 0) {
    // 如果是最后一行且是奇数行，单独设置合并参数
    if (rowIndex === tableData.length - 1 && tableData.length % 2 === 1) {
      return {
        rowspan: 1,
        colspan: 1
      };
    }
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      };
    } else {
      return {
        rowspan: 0,
        colspan: 0
      };
    }
  }
}

方案二：手动设置表格行高样式

如果合并逻辑没有问题，可以通过CSS样式强制统一表格行高，避免最后一行高度异常。注意不要使用scoped样式，或者合理使用深度选择器：

/* 全局样式或者非scoped样式 */
.el-table .el-table__row {
  height: 50px;
}

/* 如果是scoped样式，使用深度选择器 */
::v-deep .el-table .el-table__row {
  height: 50px;
}

如果只需要调整最后一行的高度，可以给最后一行添加自定义类名，然后单独设置样式：

// 给表格添加row-class-name属性
<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
  row-class-name="set-last-row-class"
>
</el-table>

// 方法实现
methods: {
  setLastRowClass({ row, rowIndex }) {
    if (rowIndex === this.tableData.length - 1) {
      return 'last-table-row';
    }
    return '';
  }
}

::v-deep .el-table .last-table-row {
  height: 50px;
}

方案三：关闭表格的自动高度计算

el-table默认会根据内容自动计算行高，如果合并后内容高度固定，可以关闭自动高度计算，手动设置表格的高度或者行高：

<el-table
  :data="tableData"
  :span-method="objectSpanMethod"
  :row-style="{ height: '50px' }"
>
</el-table>

这种方式可以直接为所有行设置固定的高度，避免最后一行因为合并逻辑出现高度偏差，适合内容高度固定的表格场景。

方案四：动态更新后重新计算布局

如果表格数据是动态加载的，合并逻辑需要在数据更新后重新执行，此时可以调用el-table的doLayout方法重新计算表格布局：

export default {
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    // 加载数据后调用
    loadTableData() {
      // 模拟数据加载
      this.tableData = [
        { name: '张三', age: 20 },
        { name: '李四', age: 21 },
        { name: '王五', age: 22 }
      ];
      // 等待DOM更新后重新计算表格布局
      this.$nextTick(() => {
        this.$refs.myTable.doLayout();
      });
    }
  }
};

注意需要给el-table添加ref属性：

<el-table
  ref="myTable"
  :data="tableData"
  :span-method="objectSpanMethod"
>
</el-table>

注意事项

在修改样式时，要注意样式的优先级，避免自定义样式被Element UI的默认样式覆盖。如果使用了scoped样式，一定要用::v-deep或者/deep/深度选择器才能修改组件内部的样式。另外，合并方法的逻辑要和表格的数据结构完全匹配，避免出现合并行数超出实际数据行数的情况，这也是最后一行高度异常的常见原因。

Element_UI表格合并单元格height异常vueel_table修改时间：2026-06-17 00:30:45