如何在对话框中仅使表格内容可滚动？ - 角材料答案

【问题标题】：How to make only table content scrollable in a dialog? - Angular Material如何在对话框中仅使表格内容可滚动？ - 角材料
【发布时间】：2020-11-19 00:57:21
【问题描述】：

我有一个Angular Material Dialog，其中包含Material Table。我想让表格内容可滚动（甚至不包括表格标题）。默认情况下，对话框的内容是可滚动的，这不是我想要的。请看例子here

【问题讨论】：

这里已经回答了同样的问题：stackoverflow.com/questions/51709280/…
@YogendraChauhan 我可以使内容可滚动，但是当我在对话框中有表格时，这是一个问题。

标签： angular angular-material

【解决方案1】：

使用flex可以轻松实现：

使用以下规则将dialog.component.scss 文件添加到组件的 styleUrls 中：

:host,
form  {
  display: flex;
  flex-direction: column;
  height: 100%;
}

form,
.table-body {
  flex: auto;
  overflow-y: auto;
}

将sticky: true 添加到表头：

*matHeaderRowDef="displayedColumns; sticky: true"

Forked Stackblitz

【讨论】：

谢谢@yurzui .. 但是如果表格前面有我不想滚动的元素，那就有问题了。
请再次检查问题中的示例。感谢您的检查。
我更新了我的演示stackblitz.com/edit/…
希望我能不止一次地为您的答案投票。再次感谢。

【解决方案2】：

以下是工作示例：

https://stackblitz.com/edit/angular-material-table-with-form-xuayxj

只需在您的桌子上添加这种样式max-height: 200px;overflow:auto; 并像这样创建垫子标题行：

<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>

【讨论】：