css 如何将可滚动的角形材料表与分页器结合使用

whitzsjs 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(116)

在我们的项目中，我们希望使用角材料表和分页器组件。如果我们坚持使用示例中使用的布局，一切都可以正常工作。最接近我们所需布局的示例如下：https://material.angular.io/components/table/examples#table-http
然而，与示例相比，在我们的布局中，我们不知道父组件的高度。我们不能将min-height和max-height设置为一个固定的数字。虽然分页器应该使用它所需要的任何高度（-〉auto），但表应该增长/收缩，并通过提供滚动条来处理溢出。
解决方案可能接近以下内容：

<div style="height: 100%; display: flex; flex-direction: column">
  <table mat-table style="flex: 1 1 0px"> ... </table>
  <mat-paginator style="flex: none"> ... </mat-paginator>
</div>

如果表确实需要所有可用空间，那么这种方法可以很好地工作，但是如果表中没有要显示的行，那么它也会消耗可用高度。我不知道分页器的高度，因为它取决于Angular 15引入的密度设置。因此，我无法将表的max-height设置为类似calc(100% - $paginatorHeight)的值。是否有一个flexbox属性告诉我的表只能增长到它的内容？或者是否有其他样式选项适合我的用例？

css

来源：https://stackoverflow.com/questions/75653653/how-to-combine-scrollable-angular-material-table-with-paginator

1条答案

按热度按时间

fdbelqdn1#

我通过将分页器移到表的页脚来解决这个问题。

<ng-container matColumnDef="paginator">
        <td mat-footer-cell *matFooterCellDef [attr.colspan]="100">
          <mat-paginator #paginator [length]="totalCount [pageIndex]="pageIndex" [pageSize]="pageSize" [pageSizeOptions]="[10, 20, 50]"
                         (page)="onPageChange($event)">
          </mat-paginator>
        </td>
   </ng-container>

   <tr mat-footer-row *matFooterRowDef="['paginator']; sticky: true"></tr>

这使得分页器在滚动时具有粘性，并且您可以将表的高度设置为100%

赞(0）回复(0）举报 2023-03-20

我来回答

css 如何将可滚动的角形材料表与分页器结合使用

1条答案

相关问题

热门标签

最新问答