html - 给 mat-table 一个高度并使 mat-row 可滚动

Question

我有一张垫子 table :

 <div class="card-body">
    <table mat-table [dataSource]="filteredEntries">
      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef>Date</th>
        <td mat-cell *matCellDef="let dailyEntry">{{dailyEntry.date | date:'shortDate'}}</td>
      </ng-container>
      // more columns...
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
      <tr mat-row *matRowDef="let row; columns:displayedColumns;"
          [class.cal-day-selected]="row.date.isSame(selectedDay)"
          [class.highlighted-daily-entry]="row === highlightedDailyEntry"
          [class.highlight-selected]="dailyEntriesActionQueue.includes(row) && inBackoffice"
          (click)="onRowClick($event, row)"></tr>
    </table>
  </div>

我想给表格(或垫子行)一个高度，并在需要时使 mat-row 可滚动。但问题是高度对 mat-table 和 mat-row 都没有任何影响。我可以通过添加包装类 card-body 来做到这一点:

.card-body {
  height: 80vh;
  overflow-y: scroll;
}

但这显然会为整个表格添加一个滚动条，而不仅仅是 mat-row。将 overflow-y 和/或 height 应用于 mat-row 不会执行任何操作。有谁知道如何为表格添加高度，并在超过高度时仅使 mat-row 可滚动？

编辑:我基本上让它像在这个 stackblitz 中一样工作发表在评论中。这工作正常，但不是从表格的最顶部开始的滚动条，我希望它在标题之后开始。

所以不是这个(从表的顶部开始)

我希望它看起来像这样(从标题开始，黑色条代表滚动条)

Answer 1

当前的 Material 表实现无法做到这一点。但是，您可以很容易地(但不是那么优雅)通过将标题行元素从表格移动到上面的包装元素中来解决这个问题:

ngAfterViewInit() {
    const headerRow = document.querySelector('mat-header-row');
    const matTable = document.querySelector('mat-table');
    const tableContainer = document.querySelector('.example-container');
    if (tableContainer && headerRow && matTable) {
      tableContainer.insertBefore(headerRow, matTable);
    }
  }

然后在 CSS 文件中将包装器的溢出设置为隐藏，将表格的高度设置为 100%，将溢出设置为自动。我还为包装器更改为 flex 布局:

.example-container {
  height: 400px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

mat-table {
  width: 100%;
  overflow: auto;
  height: 100%;
}

请注意，我也改为使用 Material 表元素而不是属性，它使您无需使用 html 表元素。

在此处查看工作示例:

https://stackblitz.com/edit/angular-fnale6