在 mat-table 中限制高度

在 Angular 的 Material 组件库中，mat-table 是用于展示表格数据的组件。然而，当表格数据较多时，mat-table 可能会占据整个页面，影响用户体验。解决这个问题的方法是限制 mat-table 的高度。在本文中，我们将介绍如何为 mat-table 设置最大高度以及如何让 mat-table 滚动。

设置最大高度

要为 mat-table 设置最大高度，可以将其包裹在一个 div 中，并设置 div 的最大高度。例如：

<div style="max-height: 400px; overflow-y: auto;">
  <table mat-table [dataSource]="dataSource">
    <!-- 表格内容 -->
  </table>
</div>

在上面的例子中，我们将 div 的最大高度设置为 400 像素，并为其设置了垂直方向的滚动条（设置 overflow-y: auto;）。这样，当 mat-table 的高度超过 400 像素时，div 将显示垂直方向的滚动条，使用户可以滚动表格内容。

让 mat-table 滚动

除了在外部容器中设置最大高度之外，我们还可以让 mat-table 自身滚动。这样，当表格内容超过 mat-table 可见区域时， mat-table 将自动滚动。要实现这一点，可以将 mat-table 包裹在一个 div 中，并设置 div 的高度以及 overflow 属性。例如：

<div style="height: 400px; overflow: auto;">
  <table mat-table [dataSource]="dataSource">
    <!-- 表格内容 -->
  </table>
</div>

在上面的例子中，我们将 div 的高度设置为 400 像素，并为其设置了垂直方向的滚动条（设置 overflow: auto;）。这样，当 mat-table 的高度超过 400 像素时，div 将显示垂直方向的滚动条，使用户可以滚动表格内容。

需要注意的是，如果将 mat-table 包裹在可以滚动的容器中，mat-table 的 header 和 footer 会有各自单独的滚动条。为了解决这个问题，我们可以在 mat-table 的 header 和 footer 中分别添加一个虚拟的单元格来填补空白空间，例如：

<ng-container matColumnDef="filler">
  <th mat-header-cell *matHeaderCellDef style="width: 100%"></th>
  <td mat-cell *matCellDef="let row" style="width: 100%"></td>
</ng-container>

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="column1">
    <th mat-header-cell *matHeaderCellDef>Column 1</th>
    <td mat-cell *matCellDef="let row">{{ row.column1 }}</td>
  </ng-container>

  <!-- 添加 filler 列 -->
  <ng-container matColumnDef="filler">
    <th mat-header-cell *matHeaderCellDef style="width: 100%"></th>
    <td mat-cell *matCellDef="let row" style="width: 100%"></td>
  </ng-container>

  <ng-container matColumnDef="column2">
    <th mat-header-cell *matHeaderCellDef>Column 2</th>
    <td mat-cell *matCellDef="let row">{{ row.column2 }}</td>
  </ng-container>

  <!-- 添加 filler 列 -->
  <ng-container matColumnDef="filler">
    <th mat-header-cell *matHeaderCellDef style="width: 100%"></th>
    <td mat-cell *matCellDef="let row" style="width: 100%"></td>
  </ng-container>

  <!-- 添加 filler 列 -->
  <ng-container matColumnDef="filler">
    <th mat-header-cell *matHeaderCellDef style="width: 100%"></th>
    <td mat-cell *matCellDef="let row" style="width: 100%"></td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>

在上面的例子中，我们在表格中添加了三个 filler 列，每个 filler 列宽度设置为 100%。这样，当表格内容超过 mat-table 的可见区域时，header 和 footer 仍然在固定位置，不会因为滚动而移动。

总结

本文介绍了如何在 mat-table 中限制高度，并为 mat-table 设置最大高度以及让 mat-table 滚动。通过设置合适的高度和滚动条，我们可以优化表格的用户体验，使用户更好地浏览和理解表格内容。