p-table 保持第一列固定/冻结

Question

我正在使用 primeng p-table，我想冻结水平滚动的第一列。当表格水平滚动时，页眉、正文和页脚第一列不会滚动。我怎样才能做到这一点？

我在页眉、正文和页脚中使用 *ngIf。请按照下面的代码操作。忽略任何语法错误，原始代码中没有语法错误。

<tr>
  <ng-container *ngFor="let col of columns">
    <ng-container *ngIf="condition; else nextTh2">
      <th>{{col.label}}</th>
    </ng-container>
    <ng-template #nextTh>
      <ng-container *ngIf="condition2; else nextTh3">
        <th>{{col.label}}</th>
      </ng-container>
    </ng-template>
    .
    .
    .
  </ng-container>
</tr>

Answer 1

您可以使用

pFrozenColumn

指令，放置在表格标题和正文模板中的

th

和

td

元素上。
如果您想动态冻结和解冻列，请将该指令与输入

[frozen]

一起使用。

这是 PrimeNG 文档中的一个示例，可在 here 找到（在页面上查找“冻结列”）：

<p-table [value]="customers" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
    <ng-template pTemplate="header">
        <tr>
            <th style="width:200px" pFrozenColumn>Name</th>
            <th style="width:100px">Id</th>
            <th style="width:200px">Country</th>
            <th style="width:200px">Date</th>
            <th style="width:200px">Company</th>
            <th style="width:200px">Status</th>
            <th style="width:200px">Activity</th>
            <th style="width:200px">Representative</th>
            <th style="width:200px" alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen">Balance</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
        <tr>
            <td style="width:200px" pFrozenColumn>{{customer.name}}</td>
            <td style="width:100px">{{customer.id}}</td>
            <td style="width:200px">{{customer.country.name}}</td>
            <td style="width:200px">{{customer.date}}</td>
            <td style="width:200px">{{customer.company}}</td>
            <td style="width:200px">{{customer.status}}</td>
            <td style="width:200px">{{customer.activity}}</td>
            <td style="width:200px">{{customer.representative.name}}</td>
            <td style="width:200px" alignFrozen="right"  pFrozenColumn [frozen]="balanceFrozen">{{formatCurrency(customer.balance)}}</td>
        </tr>
    </ng-template>
</p-table>

Answer 2

如果我需要冻结最后一列怎么办？