elementui rowspan

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

Element UI 的表格组件默认不直接支持 rowspan 属性，但可以通过自定义 span-method 方法实现合并行功能。以下为具体实现方式：

准备工作

确保项目中已安装 Element UI 并引入表格组件。若未安装，可通过以下命令安装：

npm install element-ui

实现合并行的步骤

在表格组件中绑定 :span-method 属性，并定义合并策略方法。示例代码如下：

<template>
  <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    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: '3', name: 'C', amount: 40 }
      ]
    };
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        // 合并相同 ID 的行
        if (rowIndex > 0 && row.id === this.tableData[rowIndex - 1].id) {
          return { rowspan: 0, colspan: 0 }; // 隐藏单元格
        } else {
          // 计算相同 ID 的行数
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.tableData.length; i++) {
            if (row.id === this.tableData[i].id) rowspan++;
            else break;
          }
          return { rowspan, colspan: 1 };
        }
      }
    }
  }
};
</script>

关键参数说明

• rowspan: 0, colspan: 0：表示隐藏当前单元格。
• rowspan: N, colspan: 1：表示合并 N 行，列不合并。
• 逻辑需根据实际数据结构调整，示例中通过 id 字段判断是否合并。

动态数据合并

若数据为动态加载，需在数据更新后重新计算合并策略。可通过 this.$nextTick 确保 DOM 更新完成：

this.$nextTick(() => {
  this.$refs.table.doLayout();
});

注意事项

• 合并行功能可能影响表格排序和筛选，需额外处理相关逻辑。
• 复杂合并需求建议预先处理数据，生成带有合并标记的字段。

通过以上方法可实现 Element UI 表格的行合并效果，适用于数据分组展示等场景。