深入解析：el-table合并单元格

一、理解 el-table 的单元格合并机制

1.1 合并行功能概述

  在企业级应用开发中，我们经常需要处理复杂的数据展示需求。在构建复杂的数据展示后台时，我们常常需要将表格中具有相同属性的行进行视觉上的合并，以提升信息的聚合度和可读性。在 Element Plus 的 el-table 组件中，span-method 属性是实现单元格合并的核心机制，允许开发者自定义单元格的合并逻辑，开发者可以通过实现自定义合并策略来满足各种负责需求。

  合并行的本质是通过计算相邻行数据的相似性，确定满足合并的单元格范围，然后通过 DOM 操作将多个单元格合并为一个。这种操作在前端数据可视化、报表展示等场景中尤为重要。与简单的 CSS 合并不同，el-table 合并机制能够保持数据绑定和事件处理的完整性，确保合并后的单元格仍然能够响应各种交互操作。

1.2 基础实现方法解析

  要实现 el-table 的行合并功能，首先需要在表格组件上绑定 span-method 属性，该属性需要指向一个自定义的方法函数。这个函数将接收一个包含当前行数据（row）、当前列数据（column）、当前行索引（rowIndex）、当前列索引（columnIndex）信息的对象作为参数，然后在这个函数中返回一个包含rowspan、colspan属性的对象，用于指定当前单元格应该合并的行数、列数来控制单元格的显示，其中任一值为 0 表示隐藏该单元格。

<script setup lang="ts">

const handleSpanMethod = ({
      
       row, column, rowIndex, columnIndex }) => {
     
     
  return {
     
      rowspan: 1, colspan: 1 };
}
</script>

<template>
  <el-table :data="tableData" :span-method="handleSpanMethod">
    <!-- 表格列定义 -->
  </el-table>
</template>

💡 如果服务接口返回的数据没有按合并字段排序，则建议先对数据进行分组排序处理，以保证相同值的行是连续的。

二、动态行合并的实现与策略

  这是最常见的需求，通常基于数据中的某个字段值进行判断，当相邻行的某个字段值相同时，自动进行纵向合并。其核心思路：提前遍历表格数据，计算每一行需要合并的行数，生成一个辅助对象，保存每个字段值的合并范围。然后在 span-method 中根据当前行索引获取对应的合并数值。

2.1 固定规则合并

  要实现纵向合并，需编写 spanMethod 方法，在其中判断相邻行的指定字段是否相等，并据此计算 rowspan。以下是一个基础实现：

<script setup lang="ts">
import {
     
      ref } from 'vue'
const tableData = ref<any[]>([
  {
     
     year: 2026, quarter: 'Q2', category: 'A', name: '项目1', value: 100},
  {
     
     year: 2026, quarter: 'Q1', category: 'A', name: '项目1', value: 200},
  {
     
     year: 2025, quarter: 'Q4', category: 'A', name: '项目2', value: 300},
  {
     
     year: 2025, quarter: 'Q3', category: 'B', name: '项目3', value: 400},
  {
     
     year: 2025, quarter: 'Q2', category: 'B', name: '项目4', value: 500},
  {
     
     year: 2025, quarter: 'Q1', category: 'B', name: '项目5', value: 600},
])

const arraySpanMethod = ({
      
       rowIndex, columnIndex }) => {
     
     
  if (columnIndex === 0) {
     
     
    if (rowIndex % 2 === 0) {
     
     
      return [2, 1]; // 合并2行
    } else {
     
     
      return [0, 0]; // 被合并的单元格隐藏
    }
  }
};

</script>

<template>
  <div class="container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">