Angular Material Table响应式适配：屏幕缩小时将溢出列移至详情行

核心思路 #

通过CSS媒体查询结合Angular的BreakpointObserver监听屏幕尺寸，动态控制列的显示/隐藏；同时为表格添加可展开的详情行，将小屏幕下隐藏的列内容迁移到详情行中展示。

实现步骤 #

1. 定义表格与详情行模板

在组件HTML中构建基础MatTable结构，同时嵌套详情行模板用于展示隐藏列内容：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 常规显示列 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

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

  <!-- 小屏幕下隐藏的列 -->
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef class="hide-on-small"> 邮箱 </th>
    <td mat-cell *matCellDef="let element" class="hide-on-small"> {{element.email}} </td>
  </ng-container>

  <ng-container matColumnDef="phone">
    <th mat-header-cell *matHeaderCellDef class="hide-on-small"> 电话 </th>
    <td mat-cell *matCellDef="let element" class="hide-on-small"> {{element.phone}} </td>
  </ng-container>

  <!-- 主行定义 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
      (click)="row.expanded = !row.expanded"
      class="table-row cursor-pointer"></tr>

  <!-- 详情行定义 -->
  <tr mat-row *matRowDef="let row; columns: ['detail']" class="detail-row"
      [style.display]="row.expanded ? '' : 'none'">
    <td colspan="{{displayedColumns.length}}">
      <div class="detail-content">
        <p><strong>邮箱:</strong> {{row.email}}</p>
        <p><strong>电话:</strong> {{row.phone}}</p>
        <!-- 可添加更多隐藏列内容 -->
      </div>
    </td>
  </tr>
</table>

2. CSS媒体查询控制列隐藏

在组件CSS中添加媒体查询，针对小屏幕（如768px以下）隐藏指定列：

@media (max-width: 768px) {
  .hide-on-small {
    display: none;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.detail-row {
  background-color: #f5f5f5;
}

.detail-content {
  padding: 16px;
  line-height: 1.8;
}

3. 结合BreakpointObserver动态更新列列表（可选，更灵活）

如果需要根据不同断点动态调整显示列集合，可使用Angular CDK的BreakpointObserver实现：

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-responsive-table',
  templateUrl: './responsive-table.component.html',
  styleUrls: ['./responsive-table.component.css']
})
export class ResponsiveTableComponent implements OnInit {
  dataSource = YOUR_DATA_SOURCE; // 替换为你的实际数据源
  displayedColumns: string[] = ['id', 'name', 'email', 'phone'];
  isSmallScreen$: Observable<boolean>;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.isSmallScreen$ = this.breakpointObserver.observe(Breakpoints.Handset)
      .pipe(map(result => result.matches));

    // 根据屏幕尺寸切换显示列
    this.isSmallScreen$.subscribe(isSmall => {
      this.displayedColumns = isSmall ? ['id', 'name'] : ['id', 'name', 'email', 'phone'];
    });
  }
}

关键说明 #

• 放弃Viewport方案的原因：Viewport方案易忽略表格自身宽度限制，而媒体查询+断点监听更贴合实际屏幕尺寸变化逻辑。
• 详情行展开逻辑：通过点击主行切换row.expanded状态控制显示/隐藏，若需批量控制可在TS中维护一个展开状态Map。
• 扩展性：可根据需求调整断点宽度、隐藏列数量，或在详情行中添加更复杂的布局样式。

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