本文详解如何通过 `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 子集）：{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 + 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 规范，又具备良好的可维护性与扩展性。
情感家园企业站5.0 多语言多风格版下载一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
