在延迟加载模式下滚动时,primeng 表显示空单元格,并且所有单元格边框都可见。但是在我的应用程序中尝试这个时,我只看到当前加载的单元格。只有在内容加载后,表格才会显示整个单元格,请参见图片:
我使用的是 primeng 示例中的标准 p 表,没什么特别的。 src\styles.css 看起来像这样:
<p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" [rows]="20" scrollHeight="450px" [virtualScroll]="true" (onLazyLoad)="loadDataOnScroll($event)"
[lazy]="true" [totalRecords]="totalRecords" [virtualRowHeight]="28" [loading]="loading">
<ng-template pTemplate="header" let-columns>
...
@import '../node_modules/primeng/resources/themes/nova-light/theme.css';
@import '../node_modules/primeng/resources/primeng.min.css';
@import '../node_modules/primeng/resources/components/table/table.css';
@import '../node_modules/primeicons/primeicons.css';
最佳答案
您必须定义 loadingbody 模板。像这样:
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" pReorderableColumn>
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="loadingbody" let-columns="columns">
<tr>
<td *ngFor="let col of columns">
<div>loading ...</div>
</td>
</tr>
</ng-template>
关于css - primeng p表: cell border visibility on lazy loading in virtualScroll mode,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55336068/