如何在 HTML 表格中实现跨多行的表头单元格（rowSpan）

本文详解如何使用 `rowspan` 属性让表格左侧的分类标签（如 label 1、label 2）垂直跨多行，避免重复渲染，匹配真实分组数据结构。核心在于预统计每组标签的行数，并在首次出现时设置 `rowspan`，后续同组行跳过该单元格渲染。

在构建分组型表格（如带左侧标签栏的配置表、指标报表或表单摘要）时，常见需求是：同一逻辑分组下的多行数据共享一个左侧标签，而非每行重复显示。html 原生支持通过

实现单元格纵向合并，但 react 中需结合数据结构动态计算与条件渲染，否则易出现错位、重复或 rowSpan 值错误等问题。

✅ 正确实现步骤

1. 预统计每组标签的行数
   使用 reduce 遍历原始数据，按 rowLabel 聚合计数，生成映射对象 numRowsByLabel：

   const numRowsByLabel = data.reduce((acc, row) => {   acc[row.rowLabel] = (acc[row.rowLabel] || 0) + 1;   return acc; }, {});

2. 逐标签遍历，内部按数据行渲染
   外层 labels.map() 确保标签顺序可控；内层 data.map() 筛选归属当前标签的行，并仅在该组第一行渲染带 rowSpan 的

   ，其余行跳过该列。

3. 关键逻辑：用状态标记“是否首行”
   注意：React 渲染函数需纯函数式，不可依赖闭包外变量。因此应在每次 label 循环内重置 isFirstrow = true，并在处理每行时更新：

   {labels.map((label) => {   let isFirstRow = true; // ✅ 每个 label 独立作用域   return data     .filter(row => row.rowLabel === label)     .map((row, idx) => {       const numRows = numRowsByLabel[label];       const shouldRenderLabelCell = isFirstRow;       isFirstRow = false; // ✅ 标记已处理首行        return (                    {shouldRenderLabelCell && (                            {label}                        )}           {row.key}           {row.value}                );     }); })}

⚠️ 注意事项

• key 必须唯一且稳定：推荐组合 label 与 idx（如 ${label}-${idx}），避免仅用数组索引（ndx），防止重排时 React Diff 异常。
• rowSpan 值必须准确：若某标签实际对应 3 行，但 rowSpan=”3″ 却只渲染了 2 行
  ，末尾将留空导致布局错乱。务必确保 Filter 后的行数与 numRowsByLabel[label] 严格一致。

• 样式兼容性：避免在 内嵌套 div 或使用 display: flex（会破坏表格盒模型）。所有样式应直接作用于 / ，保持语义化表格结构。

• 空标签防护：若 labels 数组包含无对应数据的标签，filter(…).Length === 0 时需跳过整个 map，避免渲染空
  。

  ✅ 最终效果对比

  问题代码（错误）	正确实现（rowSpan）
  每行重复渲染 LABEL 1 → 布局冗余、语义混乱	LABEL 1 单元格 rowSpan=”2″，覆盖两行高度，视觉与语义统一

  通过以上方法，你不仅能解决当前的渲染问题，还能构建可扩展的分组表格组件——未来支持排序、折叠、动态加载时，只需复用 numRowsByLabel 逻辑即可。记住：rowSpan 不是魔法，而是对数据分组关系的显式声明。