1. 项目概述：为什么我们需要动态合并单元格？

在后台管理系统、数据报表等前端开发场景中，表格（Table）是展示结构化数据的核心组件。Element UI（或 Element Plus）的el-table组件因其功能强大、API 设计优雅而成为 Vue 生态下的首选。然而，面对复杂的数据展示需求，尤其是当多行数据在某一列或某几列上具有相同值时，平铺罗列的方式会显得冗余且不直观。想象一下，你有一份销售数据，同一个销售员的多条订单记录，如果“销售员”这一列每一行都重复显示相同的名字，不仅浪费屏幕空间，也干扰了用户快速抓取信息的主线。

这时，合并这些具有相同值的单元格，使其在视觉上成为一个整体，就成为了提升表格可读性和专业性的关键优化点。el-table组件原生提供了span-method属性来实现单元格合并，但这只是一个“入口”。真正的挑战在于如何实现动态和灵活的合并。所谓“动态”，指的是合并逻辑能随数据变化而自动重新计算；所谓“灵活”，指的是我们能自由指定对哪些列进行合并，甚至能自定义复杂的合并规则（比如，只合并前两列，或者根据业务逻辑跨行跨列合并）。

网络上关于el-table合并单元格的讨论很多，但大多停留在展示一个静态合并的例子。当开发者试图将其应用到真实、多变的数据环境中时，往往会遇到各种问题：数据更新后合并错乱、指定列合并时其他列布局异常、合计行（summary）与合并单元格冲突、固定列（fixed）下滚动条错位等。这正是本项目标题“el-table表格动态合并相同数据单元格(可指定列+自定义合并)”所要解决的核心痛点。它不是一个简单的功能演示，而是一套应对生产环境中复杂表格需求的工程化解决方案。

2. 核心思路与方案设计：从静态到动态的跨越

实现动态合并的核心在于span-method方法。这是一个函数，el-table在渲染每个单元格时会调用它，并传入当前行、当前列、当前行数据、当前列数据四个参数。该方法需要返回一个包含两个数字的数组[rowspan, colspan]，分别表示该单元格纵向合并的行数和横向合并的列数。返回[0, 0]表示不渲染该单元格，[1, 1]表示正常渲染一个单元格。

2.1 静态合并的局限性

一个典型的静态合并示例可能是这样的：

spanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 只对第一列操作 if (rowIndex % 2 === 0) { return [2, 1]; // 偶数行合并2行 } else { return [0, 0]; // 奇数行不渲染 } } }

这种方式的问题显而易见：合并逻辑与数据内容完全脱钩。它依赖于固定的行索引（rowIndex），一旦数据排序、过滤或分页发生变化，合并效果就会乱套，因为它合并的并不是“数据相同”的行，而是“位置固定”的行。

2.2 动态合并的核心算法

动态合并的思路是：在渲染前，先遍历整个数据源，为每一列计算出每一行单元格应有的rowspan和colspan。我们将其称为“合并信息映射表”。计算的核心算法是一个经典的双层循环比对：

1. 初始化：为表格的每一列创建一个与数据数组等长的数组，用于存储该列每一行单元格的合并信息（默认为[1, 1]）。
2. 纵向扫描：对于需要合并的指定列，遍历数据行。设置一个指针pos = 0，从第一行开始。
3. 查找连续相同值：从pos开始，向后比较当前行与下一行在该列的值是否相等（注意处理null、undefined等边界情况）。
4. 计算合并数：如果相等，则计数器加一；直到遇到不相等的行或数据末尾。此时，从pos到pos+计数的这个区间，所有行在该列的值都相同。
5. 填充映射表：将映射表中pos位置（区间第一行）的rowspan设置为计数器的值，将该区间内其他行（pos+1到pos+计数-1）的rowspan设置为0（表示不渲染）。colspan通常保持为1。
6. 移动指针：将指针pos移动到下一个不同值的行（即pos + 计数），重复步骤3-5，直到遍历完所有数据。

注意：这个计算过程必须在组件数据更新后、表格渲染前执行。通常放在watch监听数据源的变化，或者在获取数据后的回调函数中立即执行。计算复杂度是 O(n * m)（n为行数，m为需合并的列数），对于上千条的数据，性能影响微乎其微，可以放心使用。

2.3 方案选型：计算属性 vs 方法 vs 状态管理

如何存储和使用这个“合并信息映射表”也有几种选择：

• 计算属性（Computed）：将数据和需要合并的列名作为依赖，在计算属性中动态生成映射表。这是最响应式、最推荐的方式。只要数据或合并列配置变化，映射表会自动更新，span-method方法只需从这个计算属性中查找结果即可。代码清晰，性能由 Vue 优化。
• 方法（Method）：在数据变化时手动调用一个计算方法来更新映射表，并将其存储在一个data属性中。这种方式更直接，但需要开发者手动管理调用时机。
• 状态管理（如 Vuex/Pinia）：当多个组件共享同一个表格的合并状态时可以考虑。但对于单个表格组件，略显重。

我们选择计算属性方案。因为它完美契合 Vue 的响应式理念，无需手动触发，逻辑内聚，是构建高可维护性动态合并功能的基础。

3. 核心细节解析与实操要点

理解了核心算法，我们开始着手实现。一个健壮的动态合并功能需要考虑诸多细节。

3.1 数据结构设计与合并信息映射表

首先，定义我们的数据接口和配置。假设我们的表格数据是一个对象数组tableData，每个对象代表一行。我们需要一个配置项来指定哪些列需要合并，以及可选的合并规则。

// 在 Vue 组件的 data 或 script setup 中 const state = reactive({ // 表格数据 tableData: [ { id: 1, name: '张三', department: '技术部', project: '项目A' }, { id: 2, name: '张三', department: '技术部', project: '项目B' }, { id: 3, name: '李四', department: '市场部', project: '项目A' }, { id: 4, name: '王五', department: '技术部', project: '项目C' }, // ... 更多数据 ], // 需要合并的列配置 mergeConfig: { // 键为 el-table-column 的 prop，值为合并规则（true 或自定义函数） fields: { 'name': true, // 合并姓名列 'department': true, // 合并部门列 // 'project': (row, nextRow) => row.project === nextRow.project, // 自定义合并规则 } } });

接下来，构建核心的计算属性spanMap：

import { computed } from 'vue'; const spanMap = computed(() => { const data = state.tableData; const config = state.mergeConfig.fields; const map = {}; // 最终映射表，结构: { ‘columnProp’: [ [rowspan, colspan], ... ] } // 初始化映射表，为每一行每一列填充默认值 [1,1] const columns = Object.keys(config); columns.forEach(col => { map[col] = new Array(data.length).fill(0).map(() => [1, 1]); }); // 对每一列进行动态合并计算 columns.forEach(col => { let pos = 0; // 当前扫描起始位置 while (pos < data.length) { // 获取当前列的合并判断函数 const mergeJudge = typeof config[col] === 'function' ? config[col] : (row, nextRow) => row[col] === nextRow[col]; let count = 1; // 连续相同值的数量，至少为1（当前行） // 向后查找连续相同值 while ( pos + count < data.length && mergeJudge(data[pos], data[pos + count]) ) { count++; } // 填充映射表：第一行设置合并行数，后续行设置为[0,0] if (count > 1) { map[col][pos] = [count, 1]; // 起始行合并 count 行 for (let i = 1; i < count; i++) { map[col][pos + i] = [0, 0]; // 被合并的行不渲染 } } else { map[col][pos] = [1, 1]; // 没有可合并的，正常显示 } pos += count; // 移动指针到下一个不同值的起始行 } }); return map; });

这个spanMap计算属性就是我们的“合并信息字典”。spanMap[‘name’][0]就表示“姓名”列第一行单元格应该返回的[rowspan, colspan]数组。

3.2span-method方法的实现

有了映射表，span-method方法就变得极其简单和高效：

const spanMethod = ({ row, column, rowIndex, columnIndex }) => { // 获取当前列的 prop，el-table-column 必须设置 prop 属性 const prop = column.property; // 如果该列在我们的合并配置中，则从 spanMap 中取结果 if (prop && state.mergeConfig.fields.hasOwnProperty(prop)) { // 确保 rowIndex 在映射表范围内 if (spanMap.value[prop] && spanMap.value[prop][rowIndex]) { return spanMap.value[prop][rowIndex]; } } // 默认返回 [1, 1] return [1, 1]; };

在模板中，将其绑定到el-table：

<el-table :data="state.tableData" :span-method="spanMethod" border> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="department" label="部门" width="120"></el-table-column> <el-table-column prop="project" label="项目" width="120"></el-table-column> <!-- 其他列 --> </el-table>

3.3 自定义合并规则进阶

上面的例子中，合并规则是简单的值相等判断。但mergeConfig.fields的值可以是一个函数，这为我们打开了自定义合并的大门。例如：

1. 忽略大小写合并：

   fields: { 'name': (row, nextRow) => row.name?.toLowerCase() === nextRow.name?.toLowerCase(), }

2. 根据多个字段组合判断：虽然标题是“指定列”，但我们可以通过自定义规则实现基于多列的复杂合并逻辑。例如，只有“姓名”和“部门”都相同时才合并“项目”列（这在实际业务中可能不常见，但展示了灵活性）：

   fields: { 'project': (row, nextRow) => row.name === nextRow.name && row.department === nextRow.department, }

3. 条件性合并：例如，只合并状态为“已完成”的任务：

   fields: { 'taskName': (row, nextRow) => row.status === 'completed' && nextRow.status === 'completed' && row.taskName === nextRow.taskName, }

实操心得：自定义合并函数是功能强大的武器，但务必确保函数是纯函数且性能良好。避免在函数内进行复杂的异步操作或访问外部可变状态。同时，合并规则的复杂度会增加理解和维护成本，应在文档中清晰说明。

4. 实操过程与核心环节实现

让我们构建一个完整的、可交互的示例，涵盖动态数据更新和列配置切换。

4.1 基础实现与响应式更新

我们将创建一个 Vue 3 组件（使用<script setup>语法），包含表格、控制面板（用于修改数据和合并配置）。

<template> <div class="dynamic-merge-demo"> <div class="control-panel"> <el-button @click="shuffleData">打乱数据</el-button> <el-button @click="addNewRow">添加新行</el-button> <div class="merge-config"> <span>合并配置：</span> <el-checkbox v-model="mergeFields.name">姓名</el-checkbox> <el-checkbox v-model="mergeFields.department">部门</el-checkbox> <el-checkbox v-model="mergeFields.project">项目</el-checkbox> </div> </div> <el-table :data="tableData" :span-method="spanMethod" border stripe style="width: 100%; margin-top: 20px" > <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column> <el-table-column prop="name" label="姓名" width="120"></el-table-column> <el-table-column prop="department" label="部门" width="120"></el-table-column> <el-table-column prop="project" label="项目" width="120"></el-table-column> <el-table-column prop="amount" label="金额" width="100" align="right"></el-table-column> </el-table> </div> </template> <script setup> import { ref, reactive, computed, watch } from 'vue'; import { ElMessage } from 'element-plus'; // 初始数据 const initialData = [ { id: 1, name: '张三', department: '技术部', project: '项目A', amount: 1000 }, { id: 2, name: '张三', department: '技术部', project: '项目B', amount: 2000 }, { id: 3, name: '李四', department: '市场部', project: '项目A', amount: 1500 }, { id: 4, name: '王五', department: '技术部', project: '项目C', amount: 3000 }, { id: 5, name: '李四', department: '市场部', project: '项目A', amount: 1200 }, ]; const tableData = ref([...initialData]); // 合并字段配置（响应式对象） const mergeFields = reactive({ name: true, department: true, project: false, }); // 核心计算属性：合并信息映射表 const spanMap = computed(() => { const data = tableData.value; const map = {}; const fields = Object.keys(mergeFields).filter(key => mergeFields[key]); fields.forEach(field => { map[field] = new Array(data.length).fill(0).map(() => [1, 1]); }); fields.forEach(field => { let pos = 0; while (pos < data.length) { let count = 1; // 简单值相等判断 while ( pos + count < data.length && data[pos][field] === data[pos + count][field] ) { count++; } if (count > 1) { map[field][pos] = [count, 1]; for (let i = 1; i < count; i++) { map[field][pos + i] = [0, 0]; } } pos += count; } }); return map; }); // span-method 方法 const spanMethod = ({ row, column, rowIndex, columnIndex }) => { const prop = column.property; if (prop && mergeFields[prop] && spanMap.value[prop]) { const result = spanMap.value[prop][rowIndex]; // 确保返回有效的数组 return Array.isArray(result) ? result : [1, 1]; } return [1, 1]; }; // 控制方法 const shuffleData = () => { tableData.value = [...tableData.value].sort(() => Math.random() - 0.5); ElMessage.success('数据已打乱，合并状态已动态更新！'); }; const addNewRow = () => { const lastId = tableData.value.length > 0 ? Math.max(...tableData.value.map(d => d.id)) : 0; const newRow = { id: lastId + 1, name: ['张三', '李四', '王五'][Math.floor(Math.random() * 3)], department: ['技术部', '市场部', '财务部'][Math.floor(Math.random() * 3)], project: `项目${String.fromCharCode(65 + Math.floor(Math.random() * 5))}`, amount: Math.floor(Math.random() * 5000) + 500, }; tableData.value.push(newRow); // 注意：由于 tableData 是 ref，push 会触发响应式更新，spanMap 会自动重新计算。 ElMessage.info(`新增了一行数据：${newRow.name} - ${newRow.project}`); }; </script> <style scoped> .dynamic-merge-demo { padding: 20px; } .control-panel { margin-bottom: 20px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .merge-config { display: flex; align-items: center; gap: 10px; } </style>

这个示例完整展示了动态合并的核心流程：数据变化（打乱、新增）或合并配置变化（勾选复选框）都会触发spanMap的重新计算，进而通过span-method实时更新表格的合并状态。你可以复制代码到支持 Vue 3 和 Element Plus 的环境中进行体验。

4.2 处理复杂表头与固定列

当表格存在复杂表头（多级el-table-column）或设置了固定列（fixed）时，动态合并需要额外注意。

• 复杂表头：span-method方法中的column参数，其property属性只在最末级的el-table-column上有效。如果你的合并目标是父级表头下的某一列，确保该列设置了唯一的prop。对于表头本身（无prop）的合并，el-table提供了header-span-method属性，其用法与span-method类似，但作用于表头单元格。动态合并表头的逻辑可以参照数据部分，但通常业务需求较少。
• 固定列（fixed）：这是动态合并最容易出问题的地方。网络上热词“el-table native-scrollbar fixed 最后一列错位”就与此相关。当同时启用固定列和单元格合并时，如果合并的单元格跨越多行，在滚动时，固定列和非固定列的行高可能因为合并单元格的渲染差异而出现轻微错位。解决方案：
  1. 确保所有el-table-column的align属性一致（如都设为“center”），可以减少因内容宽度不同导致的布局抖动。
  2. 为表格显式设置一个足够大的固定高度（height属性），并启用原生滚动条（:native-scrollbar=“true”）。这能强制表格内部使用统一的滚动容器，减少错位概率。
  3. 如果问题依然存在，可以尝试在数据更新后，强制让表格重新计算布局。Element UI/Plus 的el-table实例提供了一个doLayout方法。你可以在spanMap计算完成后，在nextTick中调用它。

     import { nextTick } from 'vue'; const tableRef = ref(); // <el-table ref="tableRef"> watch(spanMap, () => { nextTick(() => { if (tableRef.value) { tableRef.value.doLayout(); } }); }, { deep: true });

4.3 与表格其他功能的兼容性

• 排序与筛选：动态合并完全兼容表格的排序和筛选功能。因为我们的spanMap是基于当前显示的tableData计算的。当用户点击列头排序或使用筛选条件后，tableData会变化（如果是前端排序/筛选）或会重新赋值（如果是后端排序/筛选），spanMap会自动基于新数据重新计算，合并效果随之更新。关键点：确保你的合并判断逻辑（自定义函数）能正确处理排序和筛选后的数据顺序。
• 分页：分页是动态合并的“好朋友”。通常，合并逻辑只应用于当前页的数据。因为跨页的数据在视觉上是不连续的，强行合并没有意义，反而会引起混淆。我们的计算逻辑天然就是基于当前页的tableData，所以与分页完美兼容。如果你有特殊的跨页合并需求（极少见），需要在计算spanMap时获取所有数据，并考虑分页的切割点，实现会非常复杂且不推荐。
• 合计行（summary）：el-table的show-summary属性会在表格底部添加一行合计行。合计行也会调用span-method方法，此时rowIndex等于数据长度。你需要在这个方法中判断并正确处理合计行，通常合计行的所有单元格都不需要合并，直接返回[1, 1]或根据需求对第一列返回[1, N]（合并所有列）。

  const spanMethod = ({ row, column, rowIndex, columnIndex }) => { // 处理合计行 if (rowIndex === tableData.value.length) { // 假设我们只想在合计行的第一列显示“合计”，并横跨所有数据列 if (columnIndex === 0) { // 获取数据列的数量（可能需要根据表头动态计算，这里假设为4） return [1, 4]; // 合并4列 } else { return [0, 0]; // 其他列不显示 } // 或者更常见的：合计行每列都正常显示 // return [1, 1]; } // ... 原有的数据行合并逻辑 };

5. 常见问题与排查技巧实录

在实际开发中，即使按照上述步骤操作，也可能会遇到一些“坑”。下面是我在多个项目中总结的常见问题及其解决方案。

5.1 合并后单元格边框或样式异常

问题描述：合并单元格后，边框可能消失、变粗或出现重叠线，单元格背景色也可能错乱。原因分析：CSS 的border-collapse模型下，被设置为[0,0]（即不渲染）的单元格位置，其边框可能会被相邻单元格“侵占”或留下空白。解决方案：

1. 为el-table添加border属性，让组件管理边框。
2. 如果使用自定义边框样式，尝试为表格容器添加border-collapse: separate;和border-spacing: 0;。但更推荐使用el-table的内置边框。
3. 检查是否有全局 CSS 影响了td或th的边框样式，使用浏览器开发者工具仔细审查合并单元格的 DOM 结构和计算样式。

5.2 数据更新后合并状态未刷新

问题描述：通过push、splice等方式修改了tableData数组，但表格合并状态没有变化。原因分析：Vue 2 中对数组的索引赋值或修改长度可能不是响应式的。或者，计算属性spanMap的依赖没有正确触发更新。排查与解决：

1. Vue 2 环境：确保使用Vue.set或数组的变异方法（push,pop,shift,unshift,splice,sort,reverse）来修改数组。如果是替换整个数组，直接赋值即可。
2. Vue 3 环境：使用ref或reactive包装数组，直接使用push等方法是响应式的。
3. 检查依赖：确认spanMap计算属性确实依赖于tableData和mergeConfig（或mergeFields）。在 Vue 3 的computed中，只要在 getter 函数内读取了响应式变量，依赖就会自动收集。
4. 强制刷新：在极少数情况下，可以尝试在修改数据后，调用this.$nextTick(() => { this.$refs.table.doLayout(); })（Vue 2）或nextTick+doLayout（Vue 3）来强制表格重新布局。

5.3 性能问题：大数据量下滚动卡顿

问题描述：当表格有数千行数据且多列需要合并时，滚动或操作可能变得不流畅。原因分析：span-method会在每个单元格渲染时都被调用。虽然我们的实现是从预计算的spanMap中 O(1) 复杂度取值，但计算spanMap本身是 O(n*m) 的。对于超大数据量（如万行以上），初始计算或数据全量更新时可能会有短暂延迟。优化策略：

1. 分页：这是最有效的方法。绝大多数场景不需要一次性展示海量数据。
2. 虚拟滚动：如果必须展示大量数据，考虑使用支持虚拟滚动的表格组件（如el-table-v2），它只渲染可视区域内的行，能极大提升性能。但需要注意，虚拟滚动组件的合并单元格实现机制可能与el-table不同，需要查阅对应文档。
3. 惰性计算/缓存：如果合并的列很少变化，可以缓存spanMap结果，只有当数据或合并列配置真正变化时才重新计算。
4. Web Worker：将计算spanMap的密集型任务放到 Web Worker 中，避免阻塞 UI 线程。但这增加了架构复杂度，非必要不采用。

5.4 自定义合并规则函数中的陷阱

问题描述：自定义的合并判断函数导致合并结果不符合预期，或者页面报错。排查要点：

1. 空值处理：确保函数能安全处理null、undefined、空字符串等。使用可选链操作符（?.）和空值合并运算符（??）是很好的实践。

   (row, nextRow) => (row.name ?? '') === (nextRow.name ?? '')

2. 引用类型值比较：如果比较的是对象或数组，直接使用===比较的是引用地址。你需要进行深比较或比较特定的属性。

   // 错误：比较数组引用 (row, nextRow) => row.tags === nextRow.tags // 正确：比较数组字符串化或特定逻辑 (row, nextRow) => JSON.stringify(row.tags) === JSON.stringify(nextRow.tags) // 或，假设 tags 是字符串数组，且顺序有意义 (row, nextRow) => row.tags?.join(',') === nextRow.tags?.join(',')

3. 函数副作用：确保合并判断函数是纯函数，不要在其中修改外部状态或进行异步操作。

5.5 与行样式、单元格样式的配合

有时我们需要根据合并状态来设置行或单元格的样式（例如，给合并后的首行加粗字体）。实现方法：el-table提供了row-style和cell-style属性。我们可以在spanMap中不仅存储合并信息，还可以存储一些标记。例如，在计算时，为需要特殊样式的行（合并区间的第一行）添加一个标记。然后在cell-style方法中读取这个标记来应用样式。

// 在计算 spanMap 时，同时生成一个 styleMap const styleMap = computed(() => { // ... 类似 spanMap 的计算逻辑 // 当确定某行某列是合并起始单元格时 // styleMap[col][rowIndex] = { isMergeStart: true, mergeCount: count }; }); const cellStyle = ({ row, column, rowIndex, columnIndex }) => { const prop = column.property; const styleInfo = styleMap.value[prop]?.[rowIndex]; if (styleInfo?.isMergeStart) { return { fontWeight: 'bold', backgroundColor: '#f5f7fa' }; } return {}; };

在模板中绑定：:cell-style=“cellStyle”。

最后，动态合并单元格功能是提升el-table数据展示能力的利器。它从简单的视觉优化出发，深入到数据驱动的动态计算、与表格其他功能的协同以及性能优化的层面。实现的关键在于将合并逻辑与数据紧密绑定，并通过响应式的计算属性来驱动视图更新。记住，清晰的配置接口、健壮的空值处理、对固定列/合计行等边界情况的考量，是让这个功能从“能用”到“好用”的关键。在实际项目中，建议将此功能封装成一个可复用的 Mixin、Composable 或高阶组件，通过传入data和mergeFields配置即可轻松启用，这将极大提升团队的开发效率。