P表保持第一栏固定/冻结
P表保持第一栏固定/冻结
提问于 2022-08-25 16:52:52
我正在使用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>回答 1
Stack Overflow用户
发布于 2022-08-25 17:31:42
您可以使用pFrozenColumn指令，该指令放置在表的标头和正文模板中的th和td元素上。
如果要动态冻结和取消冻结列，请与输入[frozen]一起使用该指令。
下面是PrimeNG文档中的一个示例，查找这里 (查找页面上的“冻结列”)：
<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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73491160
复制相关文章
相似问题
腾讯云开发者
