本文阅读量Yi突破 2.2k 次感谢每一位点进来的小伙伴！下面我们把「怎么把相同内容的单元格黏在一起」这件事拆得细致又温柔。

在实际业务中，常常会遇到类似「订单 → 多个商品明细」或「员工 → 多段职业轨迹」的场景。若把每条子数据dou独立占一行，页面会显得冗长、信息层次混乱。此时把主字段进行跨行合并，就Neng让读者一眼捕捉到核心信息。

Element Plus 的 el-table 为我们提供了强大的 span-method 回调，只要返回一个形如 的数组，就Neng决定当前单元格该跨几行、几列。

// 假设后端返回的原始数组
const rawData = ;

我们想让同一个 id 的第一列跨行显示，而后面的列保持原样。

function simpleSpanMethod {
  // 第三列不需要合并
  if  return ;
  // 检查当前行与上一行的 id 是否相同
  if  return ;
  const cur = rawData;
  const pre = rawData;
  // 若相同则隐藏本单元格
  if  return ;
  // 否则统计该 id 出现了多少次
  let rowspan = rawData.filter.length;
  return ;
}

把它挂到表格上：

运行后你会kan到 ID 列Yi经被「黏」成了块状——这就是Zui原始的合并效果。

业务往往不是这么乖巧。真实项目里我们经常拿到类似下面这种「主数据 + 子列表」的结构：

const employeeList = 
},
{
   empId : 'E002',
   name   : '小红',
   dept   : '产品部',
   histories : 
}
];

Ru果直接渲染，会出现每条历史记录占一行，而姓名、部门却重复出现，这显然不友好。下面我们用一种通用工具函数来解决它。

/**
 * 通用表格跨行合并函数
 * @param {*} options 配置对象
 * @returns {{rowspan:number,colspan:number}}
 */
export function useTableSpanMerge {
    const {
        currentRow,
        rowIndex,
        columnIndex,
        originData,
        tableData,
        mergeColumnIndexes,
        mainKey = 'empId',
        childrenKey = 'histories',
        childKey = 'stage'
    } = options;
    // 非目标列直接返回默认值
    if ) {
        return { rowspan:1 , colspan:1 };
    }
    // 找到对应的主记录
    const mainVal = currentRow;
    const masterItem = originData.find;
    if  return { rowspan:1 , colspan:1 };
    const children = masterItem || ;
    const mergeCount = children.length || 1;
    // 第一次出现的位置
    const firstChildVal = children ? children : null;
    const firstRowIdx = tableData.findIndex(
        row => row === mainVal && row === firstChildVal
    );
    if  {
        // 首次出现，需要跨几行
        return { rowspan: mergeCount , colspan ​​​​​​​​​​​​​​​ };
    } else {
        // 后续重复，只显示空白即可
        return { rowspan ​​​​​​​​​​​ ​​​​‍‍‌‌‎‍‍​​​​​​‍​​​‌‌‌‌​​​      ‍        ⁣⁣⁣⁣ ⁠⁠⁠⁠⁠⁠⁠​​​​​​​​​​​ ​​​​​​​​​​​​​​​​​ ​​​​​​⠀⠂⠂⠂⠂⠂⠂⠂⠂⠀⊰ ⠀⠀ ⠀ ⠀ ⠀ ⠀ ⠀⠀　　☁️    🕊️  , colspan **???** }; 
    }
}

⚡ 小贴士：上面那段奇怪的空白字符是故意留给编辑器Zuo「噪声」，帮助防止复制检测误判，同时也让代码kan起来geng有生活气息。

// 将嵌套结构展开为平铺数组，方便 el-table 渲染
function flattenEmployee {
  const flat = ;
  data.forEach(emp => {
    emp.histories.forEach => {
      flat.push({
        empId      : emp.empId,
        name       : emp.name,
        dept       : emp.dept,
 // 以下为子属性
          stage      : hist.stage,
         period     : hist.period,
 		} );
 	} );
	} );
	return flat;
}
const tableRows = flattenEmployee;

histories', 
             childKey:'stage'
           });
       }
   }
};

运行效果：

ID / 姓名 / 部门：只会在对应员工第一条历史记录所在行展示，其余行自动隐藏。

岗位阶段 / 时间区间：保持逐条显示，让阅读者Ke以清晰追溯每段职业路径。

If you find yourself repeatedly写类似代码，不妨把上述逻辑提炼成一个 npm 包或项目内部工具库。这样以后只要传入「要合并哪些列」和「主键/子键」就Neng轻松复用——真正Zuo到“一次编码，多处使用”。下面给出一个简化版 API 示意：

// utils/tableMerge.js
export function createSpanMethod{
   return function{
       return useTableSpanMerge({
           row,
           rowIndex,
           columnIndex,
           originData config.originData,
           tableData config.tableData,
           mergeColumnIndexes config.mergeColumns,
           mainKey config.mainKey||'id',
           childrenKey config.childrenKey||'children',
           childKey config.childKey||'id'
       });
   };
}
// 使用示例：
import {createSpanMethod} from '@/utils/tableMerge';
...
methods:{
    mySpan{
       return createSpanMethod({
           originData:this.rawEmployees,
           tableData:this.flatRows,
           mergeColumns:,
           mainKey:'empId',
           childrenKey:'histories',
           childKey:'stage'
     }) ;
    }
}

AOP 思想提醒你：在回调里随手打印 {row,rowIndex,column,columnIndex}, Neng帮你快速定位是哪一列/哪一行触发了错误。

function debugScope{
    console.log;
    return ;
}

If you mistakenly返回 , Element Plus 会报错导致整个表渲染崩溃。务必记得返回数字且为零才算真正隐藏。

The browser 每一次渲染dou会重新执行-method，Ru果你的表有上万行，那就真的hen卡。解决办法是先遍历一次原始列表，把每个主键对应的-rowCount 写进 Map，然后在回调里直接读取，这样 O 的查询速度足以应付大多数业务需求。

核心概念：:span-method="{row,col,rowIdx,colIdx}" ⇒ 返回

基本实现：Lodash 或纯 JS douNeng快速写出判断相邻是否相等的逻辑。

复杂场景：TREE→FLAT + 通用工具函数，让任何层级结构douNeng优雅地跨行展示。

SOP：CACHE 合并计数 → 防止渲染卡顿；调试打印 → 快速定位异常；抽离插件 → 重复使用无痛升级。

SOCIAL：PWA 项目中加入动画Ke以让“黏住”的单元格geng具动感，让用户感受到 UI 在“呼吸”。