非懒加载模式的PrimeNG p-table能否在表头下方显示加载spinner

完全可以实现，未开启懒加载的普通PrimeNG p-table同样支持表头正常显示、仅内容区域展示加载状态的效果。

方案1：使用p-table内置loading属性（推荐） #

这是最简单的实现方式，利用PrimeNG p-table原生支持的loading相关配置，无需改动原有业务逻辑：

步骤1：调整外层判断逻辑 #

删除原有外层div的*ngIf="(notificationDashboardLi && notificationDashboardLi.length > 0)"判断，避免加载阶段无数据时整个表格被隐藏，导致表头无法显示。

步骤2：给p-table添加loading配置 #

在p-table标签上添加[loading]属性绑定你的加载状态变量，同时自定义加载模板替换默认的加载样式：

<div class="row" style="padding:10px;">
    <div class="col-sm-12">
    <p-table #dt [value]="notificationDashboardLi" [columns]="cols" [paginator]="true" [rows]="rowsPerPage" 
    [rowsPerPageOptions]="rowsPerPageOptions" [responsive]="true" dataKey="id"
    [loading]="isLoading">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <!-- 原有表头代码保持不变 -->
            </tr>
        </ng-template>
        <!-- 自定义加载模板，仅在内容区域显示 -->
        <ng-template pTemplate="loading">
            <div style="padding: 2rem 0; text-align: center;">
                <div class="loader"></div>
            </div>
        </ng-template>
        <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
            <tr>
                <!-- 原有行展开代码保持不变 -->
            </tr>
        </ng-template> 
         <ng-template pTemplate="body" let-rowData let-columns="columns" let-expanded="expanded">
            <tr>
                <!-- 原有行内容代码保持不变 -->
            </tr> 
        </ng-template>
        <!-- 可选：空数据状态模板，加载完成后无数据时显示 -->
        <ng-template pTemplate="emptymessage" let-columns>
            <tr>
                <td [attr.colspan]="columns.length" style="text-align: center; padding: 2rem 0;">
                    暂无数据
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

步骤3：控制加载状态 #

在你的业务逻辑中，数据请求发起前将isLoading设为true，数据赋值给notificationDashboardLi完成后将isLoading设为false即可。 #

方案2：利用空状态模板实现 #

如果你的PrimeNG版本较低不支持自定义loading模板，可以用空状态模板变通实现：
加载阶段将p-table的value绑定为空数组，此时会自动显示emptymessage模板，加载完成后再赋值真实数据：

<p-table #dt [value]="isLoading ? [] : notificationDashboardLi" [columns]="cols" [paginator]="true" [rows]="rowsPerPage" 
[rowsPerPageOptions]="rowsPerPageOptions" [responsive]="true" dataKey="id">
    <!-- 原有表头代码不变 -->
    <ng-template pTemplate="emptymessage" let-columns>
        <tr>
            <td [attr.colspan]="columns.length" style="text-align: center; padding: 2rem 0;">
                <div *ngIf="isLoading">
                    <div class="loader"></div>
                </div>
                <div *ngIf="!isLoading">
                    暂无数据
                </div>
            </td>
        </tr>
    </ng-template>
    <!-- 其他模板代码不变 -->
</p-table>

注意事项 #

两种方案均不依赖懒加载配置，普通模式的p-table完全可用。如果出现加载阶段表头不显示的问题，优先检查是否有外层*ngIf判断限制了表格的渲染。

内容的提问来源于stack exchange，提问作者Geek