当前位置：首页 > 前端教程

elementui rowspan

2026-03-05 18:12:58前端教程

合并行（Rowspan）在 Element UI 表格中的实现

Element UI 的表格组件支持通过自定义 span-method 方法实现行合并（rowspan）功能。以下是一个具体示例和实现步骤。

基本实现方法

在 el-table 组件中，通过 :span-method 绑定一个函数来处理行列合并逻辑。该函数接收一个包含 row、column、rowIndex、columnIndex 的参数对象，需返回一个形式为 [rowspan, colspan] 的数组。

<template>
  <el-table :data="tableData" :span-method="objectSpanMethod" border>
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="amount" label="Amount"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: '1', name: 'A', amount: 10 },
        { id: '1', name: 'A', amount: 20 },
        { id: '2', name: 'B', amount: 30 },
        { id: '2', name: 'B', amount: 40 }
      ]
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        // 合并前两列中相同值的行
        if (rowIndex > 0 && 
            row[column.property] === this.tableData[rowIndex - 1][column.property]) {
          return [0, 0]; // 不显示当前单元格
        }
        let rowspan = 1;
        for (let i = rowIndex + 1; i < this.tableData.length; i++) {
          if (row[column.property] === this.tableData[i][column.property]) {
            rowspan++;
          } else {
            break;
          }
        }
        return [rowspan, 1];
      }
    }
  }
};
</script>

动态计算合并行数

对于动态数据，可预先计算每行的合并信息。以下是一个优化后的实现方式：

methods: {
  calculateSpans(data, prop) {
    const spans = [];
    let pos = 0;
    for (let i = 0; i < data.length; ) {
      const current = data[i][prop];
      let count = 1;
      while (i + count < data.length && data[i + count][prop] === current) {
        count++;
      }
      spans[pos] = count; // 记录起始行的合并数
      for (let j = pos + 1; j < pos + count; j++) {
        spans[j] = 0; // 后续行标记为不显示
      }
      pos += count;
      i += count;
    }
    return spans;
  },

  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {
      const spans = this.calculateSpans(this.tableData, 'id');
      return [spans[rowIndex] || 0, 1];
    }
    if (columnIndex === 1) {
      const spans = this.calculateSpans(this.tableData, 'name');
      return [spans[rowIndex] || 0, 1];
    }
  }
}