我正在使用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>
发布于 2022-08-25 17:31:42
您可以使用 pFrozenColumn 指令,该指令放置在表的标头和正文模板中的 th 和 td 元素上。
pFrozenColumn
th
td
如果要动态冻结和取消冻结列,请与输入 [frozen] 一起使用该指令。
[frozen]
下面是PrimeNG文档中的一个示例,查找 这里 (查找页面上的“冻结列”):
<p-table [value]="customers" scrollDirection="both" [scrollable]="true" scrollHeight="400px" styleClass="mt-3"> <ng-template pTemplate="header"> <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> </ng-template> <ng-template pTemplate="body" let-customer> <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>