Angular中如何将表格行作为另一行的子行固定显示（无展开功能）

1. 调整数据结构 #

给包含子数据的行对象添加children属性，存储子行数据：

// 组件内定义表格数据
tableData = [
  { colA: 'Cell 1', colB: 'Cell 2', children: [{ colA: '子行单元格1', colB: '子行单元格2' }] },
  { colA: 'Cell 3', colB: 'Cell 4' } // 无子女数据的行
];

2. 修改表格模板 #

在原有的父行循环后，新增子行渲染逻辑，通过*ngIf判断是否存在子数据，直接固定显示子行：

<div class="s-table-container">
  <table class="s-table">
    <thead>
      <tr>
        <th>Column A</th>
        <th>Column B</th>
      </tr>
    </thead>
    <tbody>
      <!-- 循环渲染父行 -->
      <tr *ngFor="let row of tableData">
        <td>{{ row.colA }}</td>
        <td>{{ row.colB }}</td>
      </tr>
      <!-- 渲染子行：固定显示在对应父行下方（分列显示版） -->
      <tr *ngFor="let row of tableData" *ngIf="row.children">
        <td>{{ row.children[0].colA }}</td>
        <td>{{ row.children[0].colB }}</td>
      </tr>
      <!-- 如果子行需要合并单元格展示，可替换为下面的代码： -->
      <!-- <tr *ngFor="let row of tableData" *ngIf="row.children">
        <td colspan="2" class="child-cell">
          {{ row.children[0].colA }} | {{ row.children[0].colB }}
        </td>
      </tr> -->
    </tbody>
  </table>
</div>

注：如果有多条子行，可在父行循环内嵌套子行循环，确保所有子行都固定显示在对应父行下方。

3. 添加样式区分子行 #

通过CSS给子行添加视觉层级区分，比如缩进、浅背景色：

.s-table tbody tr:nth-child(even):not(.child-row) {
  /* 保持原表格奇偶行样式 */
  background-color: #fff;
}
.s-table .child-row {
  padding-left: 2rem; /* 缩进体现层级 */
  background-color: #f8f8f8;
}

内容的提问来源于stack exchange，提问作者Technical Solutions