Angular-PrimeNG筛选表格问题：日期弹窗显示在表格下方

问题描述 #

我在用带筛选功能的PrimeNG表格，其中几列是日期类型。日历弹窗功能正常，但表格行数少的时候，弹窗会显示在表格下方。已经试过调整z-index属性，没解决问题。

相关代码 #

<p-table #budgetTab [value]="budgets" dataKey="id"
       [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading"
       [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
       [globalFilterFields]="['department.name','start','end','periodString','dateApproved']" [tableStyle]="{'min-width':'75rem'}">
<ng-template pTemplate="caption">
  <div class="flex">
            <span class="p-input-icon-left p-ml-auto">
                <i class="pi pi-search"></i>
                <input pInputText type="text" placeholder="Search keyword" />
            </span>
  </div>
</ng-template>
<ng-template pTemplate="header" style="z-index: 1">
  <tr>
    <th style="width:20%">Dept</th>
    <th style="width:20%">Start</th>
    <th style="width:20%">End</th>
    <th style="width:20%">Period</th>
    <th style="width:20%">Approved</th>
  </tr>
  <tr>
    <th>
      <p-columnFilter type="text" field="department.name"></p-columnFilter>
    </th>
    <th>
      <p-columnFilter type="date" field="start"></p-columnFilter>
    </th>
    <th>
      <p-columnFilter type="date" field="end"></p-columnFilter>
    </th>
    <th>
      <p-columnFilter type="text" field="periodString"></p-columnFilter>
    </th>
    <th>
      <p-columnFilter type="date" field="dateApproved"></p-columnFilter>
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-budget>
  <tr>
    <td>
      {{budget.department.name | titlecase}}
    </td>
    <td>
      {{budget.start | date: 'mediumDate'}}
    </td>
    <td>
      {{budget.end | date: 'mediumDate'}}
    </td>
    <td>
      {{budget.periodString}}
    </td>
    <td>
      {{budget.dateApproved | date: 'mediumDate'}}
    </td>
  </tr>
</ng-template>
<ng-template pTemplate="emptymessage">
  <tr>
    <td colspan="5">No budgets found.</td>
  </tr>
</ng-template>
</p-table>

解决方法 #

1. 移除表格容器的overflow限制 #

PrimeNG表格默认会给容器添加overflow:hidden，导致弹窗被截断。在组件样式或全局样式中添加：

:host ::ng-deep .p-table {
  overflow: visible !important;
}

2. 将日期弹窗挂载到body #

给日期筛选器设置appendTo属性，把弹窗挂载到body上，脱离表格容器的样式约束：

<!-- 修改所有日期筛选器 -->
<p-columnFilter type="date" field="start" appendTo="body"></p-columnFilter>
<p-columnFilter type="date" field="end" appendTo="body"></p-columnFilter>
<p-columnFilter type="date" field="dateApproved" appendTo="body"></p-columnFilter>

3. 强制提高日历弹窗的z-index #

直接给日历弹窗设置更高的层级，确保它显示在表格上方：

:host ::ng-deep .p-datepicker {
  z-index: 9999 !important;
}

4. 检查分页器容器样式 #

如果分页器区域也有overflow限制，同步修改：

:host ::ng-deep .p-paginator {
  overflow: visible;
}

内容的提问来源于stack exchange，提问作者Alex Lynn