PrimeNG 15表格冻结列与下拉框层级冲突问题求助

问题 #

使用Angular + PrimeNG 15开发时，表格第一列为冻结列，横向滚动时，普通文本列会正常滑到冻结列下方，但第三列的下拉框却覆盖在冻结列上方，不符合预期。

相关代码 #

<p-table [value]="rows" [scrollable]="true" scrollHeight="500px" styleClass="p-datatable-gridlines">
  <ng-template pTemplate="header">
    <tr>
      <th pFrozenColumn class="header">header xxx</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr>
      <td pFrozenColumn>shdfgjsdjfsjdf</td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td><p-dropdown appendTo="body" [options]="cities" [(ngModel)]="selectedCity"></p-dropdown></td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td><p-dropdown appendTo="body" [options]="cities" [(ngModel)]="selectedCity" [autoZIndex]="false" [baseZIndex]="0"></p-dropdown></td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td>wwwwwwwwwwwwwwwww</td>
    </tr>
  </ng-template>
</p-table>

解决方法 #

方案1：移除appendTo="body"属性 #

问题根源是appendTo="body"让下拉框DOM脱离了表格容器，不受冻结列的层级约束。移除该属性后，下拉框会留在单元格内，滚动时自动被冻结列遮挡：

<p-dropdown [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>

方案2：手动调整z-index层级（需保留appendTo="body"时使用） #

若必须保留appendTo="body"，通过CSS强制设置冻结列层级高于下拉框面板：

/* 提升冻结列的层级 */
.p-datatable-frozen-column {
  z-index: 10 !important;
}

/* 降低下拉框面板的层级 */
.p-dropdown-panel {
  z-index: 5 !important;
}

确保上述CSS规则在全局样式文件中生效，避免被PrimeNG默认样式覆盖。

内容的提问来源于stack exchange，提问作者Herman Fransen