如何解决具有冻结列功能的复选框选择导致在primng表中有多个复选框列
我正在我的有角项目中实现Primeng Table的以下两个功能。
- Checkbox selection。向下滚动到名为复选框选择的部分。
- Frozen Columns。向下滚动到名为冻结列的部分。
问题:冻结列时,复选框列同时出现在“冻结列”和“可滚动列”中。
必需的行为:无论列是否冻结,都应该始终有一个Checkbox列。
这是Stackblitz对问题的最小复制。
https://stackblitz.com/edit/primeng-tableselection-demo-cs4wqw?file=src%2Fapp%2Fapp.component.ts
解决方法
我不太确定为什么会发生这种情况,我们需要查看源以找出答案,但是您可以通过为列添加一个额外的字段来解决它。
组件
this.scrollableCols = [
{ field: 'checkBox',header: 'checkBox' },{ field: 'year',header: 'Year' },{ field: 'brand',header: 'Brand' },{ field: 'color',header: '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
组件
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。