我正在实现以下两个功能的Primeng表在我的角度项目。
Problem:当我冻结列时,复选框列同时出现在“冻结”列和“可滚动”列中。
Required Behavior:应该始终有一个复选框列,不管是否冻结列。
下面是这个问题的Stackblitz最小复制。
https://stackblitz.com/edit/primeng-tableselection-demo-cs4wqw?file=src%2Fapp%2Fapp.component.ts
发布于 2020-08-15 07:32:20
我不太清楚为什么会发生这种情况--我们需要查看源代码才能找到答案,但是您可以通过为列添加一个额外的字段来绕过它。
组件
this.scrollableCols = [
{ field: 'checkBox', header: 'checkBox' },
{ field: 'year', header: 'Year' },
{ field: 'brand', header: 'Brand' },
{ field: 'color', header: 'Color' },
{ field: 'year', header: 'Year' },
{ field: 'brand', header: 'Brand' },
{ field: 'color', header: 'Color' }
];
模板
<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="cars1" [scrollable]="true"
scrollHeight="200px" frozenWidth="300px">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:300px;">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr>
<!-- <th>
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th> -->
<th *ngFor="let col of columns" style="height:35px">
<ng-container *ngIf="col.field === 'checkBox' else baseTemp">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</ng-container>
<ng-template #baseTemp>
{{col.header}}
</ng-template>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<!-- <td>
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</td>
-->
<td *ngFor="let col of columns" style="height:35px">
<ng-container *ngIf="col.field === 'checkBox' else baseTemp">
<p-tableCheckbox [value]="rowData"></p-tableCheckbox>
</ng-container>
<ng-template #baseTemp>
{{rowData[col.field]}}
</ng-template>
</td>
</tr>
</ng-template>
</p-table>
在这里的
ng-container *ngIf="col.field === 'checkBox' else baseTemp"
中,我们使用字段复选框检查列,然后添加p-tableCheckbox
组件
https://stackoverflow.com/questions/63379129
复制相似问题