Element Plus动态表格单元格合并：span-method方法精粹总结‌

Element Plus 动态表格单元格合并：span-method 方法精粹总结

前言
span-method 介绍
API 详解与参数说明
动态合并场景讲解
- 4.1 按某列相同值合并行
- 4.2 多条件合并（行与列）
完整示例：基于“类别+状态”分组合并
- 5.1 数据结构与需求分析
- 5.2 代码实现（模板 + 脚本）
- 5.3 运行效果图解
常见坑与优化建议
总结

前言

在使用 Element Plus 的 <el-table> 时，我们经常会遇到需要“合并单元格”以提升数据可读性或分组效果的场景。例如：当多条数据在“类别”或“组别”字段完全相同时，合并对应行，让表格更紧凑、更直观。Element Plus 提供了 span-method 属性，让我们以函数方式动态控制某个单元格的 rowspan 和 colspan。本文将从原理、参数、示例、图解等多个角度讲解如何使用 span-method，并在一个“基于类别 + 状态分组合并”的综合示例中，手把手演示动态合并逻辑与实现方式。

span-method 介绍

在 Element Plus 的 <el-table> 中，设置 :span-method="yourMethod" 后，组件会在渲染每一个单元格时调用 yourMethod 方法，并通过它返回的 [rowspan, colspan] 数组，去控制当前单元格的合并状态。其最典型的用例是“相邻行相同值时，合并对应行单元格”。

典型语法示例：

<el-table
  :data="tableData"
  :span-method="spanMethod"
  style="width: 100%">
  <el-table-column
    prop="category"
    label="类别">
  </el-table-column>
  <el-table-column
    prop="name"
    label="名称">
  </el-table-column>
  <el-table-column
    prop="status"
    label="状态">
  </el-table-column>
</el-table>

methods: {
  spanMethod({ row, column, rowIndex, columnIndex }) {
    // 这里需要返回一个 [rowspan, colspan] 数组
    return [1, 1];
  }
}

上面例子中，spanMethod 会在渲染每个单元格时被调用，接收参数信息后，返回一个长度为 2 的数组，表示该单元格的 rowspan、colspan。若都为 1 则表示不合并；若 rowspan > 1，则向下合并多行；若 colspan > 1，则向右合并多列；若任意一项为 0，则表示该单元格处于被“合并态”中，渲染时被省略不可见。

API 详解与参数说明

span-method 函数签名与参数：

type SpanMethodParams = {
  /** 当前行的数据对象 */
  row: Record<string, any>;
  /** 当前列的配置对象 */
  column: {
    property: string;
    label: string;
    [key: string]: any;
  };
  /** 当前行在 tableData 中的索引，从 0 开始 */
  rowIndex: number;
  /** 当前列在 columns 数组中的索引，从 0 开始 */
  columnIndex: number;
};

该方法必须返回一个 [rowspan, colspan] 数组，例如：

[2, 1]：表示此单元格向下合并 2 行、横向不合并。
[1, 3]：表示此单元格向下不合并、向右合并 3 列。
[0, 0]：表示此单元格已被上方或左方合并，不再渲染。
未命中任何合并条件时，建议返回 [1, 1]。

注意点：

只对单元格一级处理：无论是 rowspan 还是 colspan，都只针对当前层级进行合并，其它嵌套 header、复杂表头中的跨行合并要另行考虑。
覆盖默认的 rowspan：若你在 <el-table-column> 上同时设置了固定的 rowspan，span-method 会优先执行，并覆盖该属性。
返回 0 表示被合并单元格：当某单元格返回 [0, 0] 或 [0, n] 或 [m, 0]，它都会处于“被合并状态”并被隐藏，不占据渲染空间。

动态合并场景讲解

常见的动态合并，主要有以下几种场景：

4.1 按某列相同值合并行

需求：
对某一列（如“类别”）序号相同的相邻行，自动将“类别”单元格合并成一格，避免在“类别”列中重复渲染相同文字。例如：

序号	类别	名称	状态
1	A	任务 A1	进行中
2	A	任务 A2	已完成
3	B	任务 B1	进行中
4	B	任务 B2	已完成
5	B	任务 B3	暂停
6	C	任务 C1	进行中

上述表格中，如果按照 category 列做合并，那么行 1、2（同属 A）应合并成一个“类别”为 A 的单元格；行 3、4、5（三行同属 B）合并成一个“类别”为 B 的单元格；行 6（C）独立。

核心思路：

遍历 tableData，统计每个“相同类别”连续出现的行数（“分组信息”）；
渲染合并时，将分组首行返回 rowspan = 分组行数，后续行返回 rowspan = 0。

4.2 多条件合并（行与列）

在更复杂的场景下，可能需要同时：

按列 A 相同合并行；
同时按列 B 相同合并列（或多列）；

例如：当“类别”和“状态”都连续相同时，先合并“类别”列，然后在“状态”列也合并。这时，需要根据 columnIndex 决定在哪些列使用哪套合并逻辑。

完整示例：基于“类别 + 状态”分组合并

假设我们有一份数据，需要在表格中：

以 category（类别）列 完成大分组：同一类别连续的若干行合并。
以 status（状态）列 完成小分组：在同一类别内，若相邻几行的状态相同，也要将状态单元格再合并。

表格样例效果（假设数据）：

┌────┬──────────┬──────────┬────────┐
│ 序号 │ 类别     │ 名称       │ 状态   │
├────┼──────────┼──────────┼────────┤
│ 1  │ A        │ 任务 A1    │ 进行中 │
│ 2  │          │ 任务 A2    │ 进行中 │
│ 3  │          │ 任务 A3    │ 已完成 │
│ 4  │ B        │ 任务 B1    │ 暂停   │
│ 5  │          │ 任务 B2    │ 暂停   │
│ 6  │          │ 任务 B3    │ 进行中 │
│ 7  │ C        │ 任务 C1    │ 已完成 │
└────┴──────────┴──────────┴────────┘

对“类别”列 (ColumnIndex=1)：
- 行 1–3 都属于 A，rowspan = 3；
- 行 4–6 都属于 B，rowspan = 3；
- 行 7 单独属于 C，rowspan = 1。
对“状态”列 (ColumnIndex=3)：
- 在 A 组（行 1–3）中，行 1、2 的状态都为“进行中”，合并为 rowspan=2；行 3 状态“已完成” rowspan=1。
- 在 B 组（行 4–6）中，行 4、5 都是“暂停”，合并 rowspan=2；行 6 是“进行中” rowspan=1。
- 在 C 组（行 7）只有一行，rowspan=1。

下面我们详细实现该示例。

5.1 数据结构与需求分析

const tableData = [
  { id: 1, category: 'A', name: '任务 A1', status: '进行中' },
  { id: 2, category: 'A', name: '任务 A2', status: '进行中' },
  { id: 3, category: 'A', name: '任务 A3', status: '已完成' },
  { id: 4, category: 'B', name: '任务 B1', status: '暂停' },
  { id: 5, category: 'B', name: '任务 B2', status: '暂停' },
  { id: 6, category: 'B', name: '任务 B3', status: '进行中' },
  { id: 7, category: 'C', name: '任务 C1', status: '已完成' }
];

第一步：遍历 tableData，计算类别分组信息，记录每个 category 从哪一行开始、共多少条。
第二步：在同一类别内，再次遍历，计算状态分组信息，针对状态做分组：记录每个 status 从哪一行开始、共多少条。
在 span-method 中，先判断是否要合并“类别”列；否则，再判断是否要合并“状态”列；其余列统一返回 [1,1]。

5.1.1 计算「类别分组」示意

遍历 tableData:
  idx=0, category=A: 新组 A，记录 A 从 0 开始，计数 count=1
  idx=1, category=A: 继续 A 组，count=2
  idx=2, category=A: 继续 A 组，count=3
  idx=3, category=B: 新组 B，从 idx=3，count=1
  idx=4, category=B: idx=4，count=2
  idx=5, category=B: idx=5，count=3
  idx=6, category=C: 新组 C，从 idx=6，count=1
结束后得到：
  categoryGroups = [
    { start: 0, length: 3, value: 'A' },
    { start: 3, length: 3, value: 'B' },
    { start: 6, length: 1, value: 'C' }
  ]

5.1.2 计算「状态分组」示意（在每个类别组内部再分组）

以 A 组 (0–2 行) 为例：

 idx=0, status=进行中: 从 0 开始，count=1
 idx=1, status=进行中: 继续，count=2
 idx=2, status=已完成: 新组，上一组存 { start:0, length:2, value:'进行中' }, 记录新组 { start:2, length:1, value:'已完成' }

生成 A 组中的状态分组：

statusGroupsInA = [
  { start: 0, length: 2, value: '进行中' },
  { start: 2, length: 1, value: '已完成' }
]

同理，对 B 组(3–5 行)、C 组(6 行)分别做同样分组。

5.2 代码实现（模板 + 脚本）

<template>
  <div>
    <h2>Element Plus 动态表格单元格合并示例</h2>
    <el-table
      :data="tableData"
      :span-method="spanMethod"
      border
      style="width: 100%">
      <!-- 序号列 -->
      <el-table-column
        prop="id"
        label="序号"
        width="80">
      </el-table-column>

      <!-- 类别列：按类别分组合并 -->
      <el-table-column
        prop="category"
        label="类别"
        width="150">
      </el-table-column>

      <!-- 名称列：不合并 -->
      <el-table-column
        prop="name"
        label="名称"
        width="200">
      </el-table-column>

      <!-- 状态列：在同一类别内按状态分组合并 -->
      <el-table-column
        prop="status"
        label="状态"
        width="150">
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue';

/** 1. 模拟后端数据 */
const tableData = reactive([
  { id: 1, category: 'A', name: '任务 A1', status: '进行中' },
  { id: 2, category: 'A', name: '任务 A2', status: '进行中' },
  { id: 3, category: 'A', name: '任务 A3', status: '已完成' },
  { id: 4, category: 'B', name: '任务 B1', status: '暂停' },
  { id: 5, category: 'B', name: '任务 B2', status: '暂停' },
  { id: 6, category: 'B', name: '任务 B3', status: '进行中' },
  { id: 7, category: 'C', name: '任务 C1', status: '已完成' }
]);

/** 2. 计算“类别分组”信息 */
const categoryGroups = computed(() => {
  const groups = [];
  let lastValue = null;
  let startIndex = 0;
  let count = 0;

  tableData.forEach((row, idx) => {
    if (row.category !== lastValue) {
      // 先把上一组信息推入（跳过首个 push）
      if (count > 0) {
        groups.push({ value: lastValue, start: startIndex, length: count });
      }
      // 开启新一组
      lastValue = row.category;
      startIndex = idx;
      count = 1;
    } else {
      count++;
    }
    // 遍历到最后时需要收尾
    if (idx === tableData.length - 1) {
      groups.push({ value: lastValue, start: startIndex, length: count });
    }
  });

  return groups;
});

/** 3. 计算“状态分组”信息（嵌套在每个类别组内） */
const statusGroups = computed(() => {
  // 结果格式：{ [category]: [ { value, start, length }, ... ] }
  const result = {};
  categoryGroups.value.forEach(({ value: cat, start, length }) => {
    const arr = [];
    let lastStatus = null;
    let subStart = start;
    let subCount = 0;
    // 遍历当前类别范围内的行
    for (let i = start; i < start + length; i++) {
      const status = tableData[i].status;
      if (status !== lastStatus) {
        if (subCount > 0) {
          arr.push({ value: lastStatus, start: subStart, length: subCount });
        }
        lastStatus = status;
        subStart = i;
        subCount = 1;
      } else {
        subCount++;
      }
      // 到最后一行时收尾
      if (i === start + length - 1) {
        arr.push({ value: lastStatus, start: subStart, length: subCount });
      }
    }
    result[cat] = arr;
  });
  return result;
});

/** 4. span-method 方法：根据索引与分组信息动态返回 [rowspan, colspan] */
function spanMethod({ row, column, rowIndex, columnIndex }) {
  const colProp = column.property;
  // 列索引对应关系：0 → id, 1 → category, 2 → name, 3 → status
  // ① 对“类别”列 (columnIndex === 1) 做合并
  if (colProp === 'category') {
    // 在 categoryGroups 中找到所属组
    for (const group of categoryGroups.value) {
      if (rowIndex === group.start) {
        // 组首行，合并长度为 group.length
        return [group.length, 1];
      }
      if (rowIndex > group.start && rowIndex < group.start + group.length) {
        // 组内非首行
        return [0, 0];
      }
    }
  }

  // ② 对“状态”列 (columnIndex === 3) 在同一类别内做合并
  if (colProp === 'status') {
    const cat = row.category;
    const groupsInCat = statusGroups.value[cat] || [];
    for (const sub of groupsInCat) {
      if (rowIndex === sub.start) {
        return [sub.length, 1];
      }
      if (rowIndex > sub.start && rowIndex < sub.start + sub.length) {
        return [0, 0];
      }
    }
  }

  // ③ 其它列不合并
  return [1, 1];
}
</script>

<style scoped>
h2 {
  margin-bottom: 16px;
  color: #409eff;
}
</style>

5.3 运行效果图解

┌────┬───────┬────────┬───────┐
│ 序号 │ 类别  │ 名称    │ 状态  │
├────┼───────┼────────┼───────┤
│  1 │   A   │ 任务 A1 │ 进行中 │
│    │       │ 任务 A2 │ 进行中 │
│    │       │ 任务 A3 │ 已完成 │
│  4 │   B   │ 任务 B1 │ 暂停   │
│    │       │ 任务 B2 │ 暂停   │
│    │       │ 任务 B3 │ 进行中 │
│  7 │   C   │ 任务 C1 │ 已完成 │
└────┴───────┴────────┴───────┘

“类别”列
- 行 1 – 3 属于 A，第一行 (rowIndex=0) 返回 [3,1]，后两行返回 [0,0]。
- 行 4 – 6 属于 B，第一行 (rowIndex=3) 返回 [3,1]，后两行返回 [0,0]。
- 行 7 属于 C，自身返回 [1,1]。
“状态”列
- 在 A 组内：行 1–2 都是“进行中”，第一行 (rowIndex=0) 返回 [2,1]、第二行 (rowIndex=1) 返回 [0,0]；行 3 (rowIndex=2) 为“已完成”，返回 [1,1]。
- 在 B 组内：行 4–5 都是“暂停”，rowIndex=3 [2,1]、rowIndex=4 [0,0]；行 6 (进行中) [1,1]。
- C 组只有一行，rowIndex=6 [1,1]。

常见坑与优化建议

遍历逻辑重复
- 若直接在 span-method 中每次遍历整个 tableData 检索分组，会导致性能急剧下降。优化建议：在渲染前（如 computed 中）预先计算好分组信息，存储在内存中，span-method 直接查表即可，不要重复计算。
数据变动后的更新
- 如果表格数据动态增删改，会打乱原有的行索引与分组结果。优化建议：在数据源发生变化时（如用 v-for 更新 tableData），要及时重新计算 categoryGroups 与 statusGroups（由于用了 computed，Vue 会自动生效）。
跨页合并
- 如果表格开启了分页，span-method 中的分组逻辑仅对当前页 tableData 有效；若需要“跨页”合并（很少用），需要把全部数据都放于同一个表格或自己编写更复杂的分页逻辑。
复杂表头与嵌套列
- 如果表格有多级表头（带 children 的 <el-table-column>），columnIndex 的值可能不如预期，需要配合 column.property 或其他自定义字段来精确判断当前到底是哪一列。
同时合并列与行
- span-method 可以同时控制 rowspan 和 colspan。如果要横向合并列，可以在返回 [rowspan, colspan] 时让 colspan > 1，并让后续列返回 [0,0]。使用此功能时要谨慎计算列索引与数据顺序。

总结

span-method 是 Element Plus <el-table> 提供的核心动态单元格合并方案，通过返回 [rowspan, colspan] 数组来控制行/列合并。
关键步骤：预先计算分组信息，将“同组起始行索引”和“合并长度”用对象/数组缓存，避免在渲染时重复遍历。
在多条件合并场景下，可以根据 column.property 或 columnIndex 分支处理不同列的合并逻辑。
常见用例有：按单列相同合并、按多列多级分组合并，以及跨列合并。
使用时要注意分页、动态数据更新等带来的索引失效问题，并结合 Vue 的 computed 响应式特点，保证分组信息实时更新。

通过上述示例与图解，相信你已经掌握了 Element Plus 动态表格合并单元格的核心方法与思路。下一步，可以结合实际业务需求，扩展出更多复杂场景的单元格合并逻辑。