Angular Mat-Table同列子行展开功能实现问题求助

针对你遇到的Angular Material表格行展开功能的瓶颈，结合你提到的两种方案，给出以下优化思路：

优化方案一：改进官方双matRowDef方案 #

1. 解决列拖拽/列宽同步问题 #

你提到的父列与子列拖拽关联丢失，核心原因是没有让子行复用父行的列配置：

• 确保子行和父行使用完全相同的columnsToDisplay数组，这样列顺序拖拽时，子行的列顺序会自动同步。
• 列宽调整通过统一变量绑定实现，比如给每个matColumnDef绑定同一个宽度控制对象：

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header [style.width]="columnWidths.name"> 名称 </th>
  <td mat-cell *matCellDef="let element" [style.width]="columnWidths.name"> {{element.name}} </td>
</ng-container>

<!-- 父行定义 -->
<mat-row
  *matRowDef="let row; columns: columnsToDisplay; when: isParentRow"
  (click)="expandRow(row)"
  [ngClass]="{'parent-expanded': row.expanded}">
</mat-row>

<!-- 子行定义 -->
<mat-row
  *matRowDef="let row; columns: columnsToDisplay; when: isChildRow"
  class="child-row">
</mat-row>

调整列宽时只需更新columnWidths对象，父行和子行的列宽会自动同步，无需新增组件。

2. 实现子行不参与分页 #

让分页仅针对父行计数，子行作为父行的附属直接跟随渲染：

• 将分页器的length设为父行总数量，而非所有行的总数。
• 自定义分页逻辑，先筛选出当前页的父行，再将展开的子行插入到对应父行之后：

private parentRows: IRow[]; // 仅存储父行数据
dataSource = new MatTableDataSource<IRow>([]);

ngOnInit(): void {
  this.parentRows = rawData.filter(row => !row.parentId);
  this.paginator.length = this.parentRows.length;
  this.updateTableData();
}

// 分页变更时更新表格数据
onPageChange(event: PageEvent): void {
  this.updateTableData(event.pageIndex, event.pageSize);
}

// 构建带展开子行的当前页数据
updateTableData(pageIndex = 0, pageSize = this.paginator.pageSize): void {
  const startIdx = pageIndex * pageSize;
  const endIdx = startIdx + pageSize;
  const currentPageParents = this.parentRows.slice(startIdx, endIdx);
  
  const finalData: IRow[] = [];
  currentPageParents.forEach(row => {
    finalData.push(row);
    // 如果父行展开，追加子行
    if (row.expanded && row.children) {
      finalData.push(...row.children);
    }
  });
  
  this.dataSource.data = finalData;
}

// 行展开/折叠逻辑
expandRow(row: IRow): void {
  row.expanded = !row.expanded;
  this.updateTableData(this.paginator.pageIndex, this.paginator.pageSize);
}

// 排序逻辑仅针对父行
tableSortData(data: IRow[], sort: MatSort): IRow[] {
  this.parentRows = [...this.parentRows].sort((a, b) => {
    const isAsc = sort.direction === 'asc';
    switch (sort.active) {
      case 'name': return (a.name < b.name ? -1 : 1) * (isAsc ? 1 : -1);
      default: return 0;
    }
  });
  this.paginator.length = this.parentRows.length;
  this.updateTableData();
  return this.dataSource.data;
}

// 筛选逻辑仅针对父行，子行随父行显示
tableFilterData(row: IRow, filter: string): boolean {
  return !row.parentId && row.name.toLowerCase().includes(filter.toLowerCase());
}

这种方式下，分页完全基于父行数量，子行不会被拆分到其他页面。

优化方案二：改进数据源插入方案 #

针对你提到的分页拆分子行问题，核心是让分页逻辑忽略子行的计数，确保子行始终跟随父行在同一页：

// 自定义分页逻辑，仅统计父行数量
getCurrentPageData(pageIndex: number, pageSize: number): IRow[] {
  const startParentCount = pageIndex * pageSize;
  let currentParentCount = 0;
  let skippedParents = 0;
  const finalData: IRow[] = [];

  // 跳过前面页的父行
  for (const row of this.rawData) {
    if (!row.parentId) {
      if (skippedParents >= startParentCount) break;
      skippedParents++;
    }
  }

  // 收集当前页的父行及展开的子行
  for (const row of this.rawData.slice(skippedParents)) {
    finalData.push(row);
    if (!row.parentId) {
      if (currentParentCount >= pageSize) break;
      currentParentCount++;
      // 追加展开的子行
      if (row.expanded && row.children) {
        finalData.push(...row.children);
      }
    }
  }

  return finalData;
}

// 分页变更时更新数据源
onPageChange(event: PageEvent): void {
  this.dataSource.data = this.getCurrentPageData(event.pageIndex, event.pageSize);
}

// 展开行时更新当前页数据
expandRow(row: IRow): void {
  if (row.id === this.expandedRow?.id) {
    row.expanded = false;
    this.expandedRow = undefined;
  } else {
    // 先关闭之前展开的行
    if (this.expandedRow) this.expandedRow.expanded = false;
    row.expanded = true;
    this.expandedRow = row;
  }
  this.dataSource.data = this.getCurrentPageData(this.paginator.pageIndex, this.paginator.pageSize);
}

这种方式下，分页器的length仍设为父行总数量，分页逻辑会自动跳过子行的计数，确保子行与父行同页显示。

总结建议 #

• 优先选择优化后的官方双rowDef方案，代码更符合Angular Material的设计规范，维护成本更低，列同步和分页问题都能得到解决。
• 若坚持使用数据源插入方案，通过自定义分页逻辑忽略子行计数，即可解决子行被分页拆分的问题。

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