本文详解如何通过 `rowspan` 属性让表格左侧的分类标签（如 label 1、label 2）垂直跨多行显示，避免重复渲染，匹配真实数据分组结构。核心在于预统计每组标签的行数，并在首次出现时设置 `rowspan`，后续同组行跳过该 `
在构建分组型数据表格（例如带分类标题的配置项列表、报表明细等）时，常见的需求是：左侧“分类标签”只在首行显示，并纵向跨越其所属的所有数据行——这正是 HTML
✅ 正确实现步骤
-
预处理：统计每组标签对应的数据行数
使用 reduce 遍历原始数据，构建映射对象 { 'LABEL 1': 2, 'LABEL 2': 1 }：
const numRowsByLabel = data.reduce((acc, row) => {
acc[row.rowLabel] = (acc[row.rowLabel] || 0) + 1;
return acc;
}, {});- 渲染逻辑：按标签分组，每组内仅首行渲染带 rowSpan 的
注意：data.map 在内部循环中需维护 isFirstRow 状态（不可依赖索引比较，因 data 是全量数组，非当前 label 子集）：<tbody> {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 ( <tr key={`${label}-${idx}`}> {shouldRenderLabelCell && ( <td rowSpan={numRows} style={{ width: '33%', textAlign: 'center', borderRight: '1px solid #E1D9D6', fontSize: '9px', verticalAlign: 'middle', // 垂直居中提升可读性 }} > {label} </td> )} <td style={{ width: '50%', paddingLeft: '5px', fontSize: '9px', }} > {row.key} </td> <td style={{ borderLeft: '1px solid #E1D9D6', width: '50%', textAlign: 'right', fontSize: '9px', paddingRight: '5px', }} > {row.value} </td> </tr> ); }); })} </tbody>⚠️ 关键注意事项
- key 必须唯一且稳定：推荐用 label + index（如 ${label}-${idx}），避免仅用 index 导致重排错乱。
- 不要在
内嵌套 ：你原代码中... 必须直接作为 的子元素。 - rowSpan 值必须准确：若某组实际有 3 行但 rowSpan="2"，会导致下一行被覆盖或错位；务必确保统计逻辑与最终渲染数据完全一致（建议优先用 .filter().map() 替代条件返回 null 的写法，逻辑更直观）。
- 样式兼容性：rowSpan 单元格的 vertical-align: middle 可显著改善视觉对齐效果，尤其当同行其他单元格内容高度不一时。
✅ 最终效果对比
❌ 错误效果（重复标签） ✅ 正确效果（跨行标签） | LABEL 1 | 1 | | LABEL 1 | 1 | | LABEL 2 | 2 | | | 2 | | LABEL 2 | 3 | | LABEL 2 | 3 | 通过以上方法，你就能优雅地实现专业级分组表格——既符合语义化 HTML 规范，又具备良好的可维护性与扩展性。
