本文详解如何在 React（或类 JSX 环境）中动态渲染具有层级结构的嵌套数组对象（如 summary → run_type），并正确生成带 rowspan 的 HTML 表格，确保父级字段垂直跨行、子级字段逐行对齐。

本文详解如何在 react（或类 jsx 环境）中动态渲染具有层级结构的嵌套数组对象（如 summary → run_type），并正确生成带 `rowspan` 的 html 表格，确保父级字段垂直跨行、子级字段逐行对齐。

在前端开发中，将嵌套数据（如“项目汇总”包含多个“运行类型”）渲染为语义清晰、布局准确的 HTML 表格，常需借助 rowspan 实现父级字段的纵向合并。但若直接在单个

内遍历子数组，会导致 DOM 结构错乱——所有 被强制挤入同一行，无法形成真正的多行布局。

核心问题在于：rowspan 不是“让后续行自动继承”，而是明确声明“该单元格应跨越多少行”，且必须与实际 数量严格匹配。因此，正确的策略是：按子项（run_type）逐行生成 ，并在首行渲染带 rowspan 的父字段，其余行跳过该列。

以下为完整、可直接运行的解决方案（兼容 React / Next.js / Vite 等 JSX 环境）：

<table border="1" className="table table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Environment</th>
      <th>RunType</th>
    </tr>
  </thead>
  <tbody>
    {input?.summary?.map((project, projectIndex) => (
      <>
        {project?.run_type?.map((runType, runTypeIndex) => (
          <tr key={`${projectIndex}-${runTypeIndex}`}>
            {/* 仅在第一个 run_type 行渲染 name 并设置 rowspan */}
            {runTypeIndex === 0 && (
              <td rowSpan={project.run_type.length}>{project.name}</td>
            )}
            <td>{runType.environment}</td>
            <td>{runType.type}</td>
          </tr>
        ))}
      </>
    ))}
  </tbody>
</table>

✅ 关键要点说明：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• 使用双重映射：外层遍历 summary（每个项目），内层遍历 project.run_type（每个运行配置）；
• 每个 runType 对应一个 ，保证表格行数与子项数量一致；
• 通过 runTypeIndex === 0 判断是否为首行，仅在此处插入 ，值设为 project.run_type.length（即当前项目的子项总数）；
• 后续同项目的 中不再重复渲染 name 列，留空即可，由 rowspan 自动撑开视觉空间；
• key 使用复合唯一标识（${projectIndex}-${runTypeIndex}），避免列表重排时 React Diff 出错。

⚠️ 注意事项：

• 若 run_type 为空数组（[]），rowSpan={0} 无效且可能报错，建议增加防御性判断：

  {runTypeIndex === 0 && project.run_type.length > 0 && (
    <td rowSpan={project.run_type.length}>{project.name}</td>
  )}

• 在非 JSX 环境（如原生 JS 模板字符串），需手动拼接 HTML 字符串，并确保 rowspan 值为数字类型（非字符串）；
• CSS 中建议添加 vertical-align: middle 提升可读性，例如：

  table td, table th { vertical-align: middle; padding: 8px 12px; }

此方案兼顾语义化、可维护性与浏览器兼容性，适用于任意深度为 2 的父子嵌套结构（如部门→员工、订单→商品等场景），是处理此类“一对多”表格渲染的标准实践。