prime ng p-table 页脚将超过 tr 的

Question

我正在使用 prime-ng 表，我尝试在表底部放置一个按钮 我希望这个按钮始终靠近表格底部 但页脚超出了最后一个

这是p表结构

页脚位于结束之前（就像prime ng docus）

就像你在这里看到的那样（https://i.sstatic.net/ARbHoY8J.png） 基本上我希望页脚不随表格滚动（这就是发生的事情，但最后一个 tr 在按钮下）

        <div class="major ml-5 overflow-hidden h-full " *ngIf="!isLoading" [ngClass]="{'pb-6rem':!isCareTeamManage}">
            <div class="h-full">
        <ng-container *ngIf="careTeams?.length; else empty">
            <p-table
                [value]="careTeams"
                [resizableColumns]="true"
                [scrollable]="true"
                scrollHeight="flex"
                [rowHover]="true"
                sortField="careTeamName"
                [sortOrder]="1"
            >
            <ng-template pTemplate="caption">
                <div class="txt-lg uppercase title">CARETEAM MANAGEMENT</div>
            </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th class="w-20rem" pSortableColumn="careTeamName">
                            <div class="flex align-items-center relative">
                                <span class="uppercase overflow-hidden text-overflow-ellipsis">name</span>
                                <p-sortIcon field="careTeamName"></p-sortIcon>
                            </div>
                        </th>

                        <th class="w-20rem" pSortableColumn="businessInstitution">
                            <div class="flex align-items-center relative">
                                <span class="uppercase overflow-hidden text-overflow-ellipsis">institution</span>
                                <p-sortIcon field="businessInstitution"></p-sortIcon>
                            </div>
                        </th>

                        <th class="w-1"></th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-careteam let-i="rowIndex">
                    <tr>
                        <td class="flex">
                            <span class="icon icon-careteam txt-2xl pr-5"></span>
                            <span
                                class="overflow-hidden text-overflow-ellipsis w-20rem"
                                pTooltip="{{ careteam.careTeamName }}"
                                tooltipPosition="bottom"
                                tooltipStyleClass="max-content"
                                >{{ careteam.careTeamName }}</span
                            >
                        </td>
                        <td>
                            <div
                                class="overflow-hidden text-overflow-ellipsis w-20rem"
                                pTooltip="{{ careteam.businessInstitution }}"
                                tooltipPosition="bottom"
                                tooltipStyleClass="max-content"
                            >
                                {{ careteam.businessInstitution }}
                            </div>
                        </td>
                        <td>
                            <div
                                class="overflow-hidden text-overflow-ellipsis w-14rem"
                                pTooltip="{{ careteam.city }}"
                                tooltipPosition="bottom"
                                tooltipStyleClass="max-content"
                            >
                                {{ careteam.city }}
                            </div>
                        </td>

                        <td>
                            <div class="text-right">
                                <!-- [routerLink]="['/careteam', careteam.systemID, 'members']" -->

                                <span
                                    class="txt-link hyper-hover cursor-pointer pr-4"
                                    [routerLink]="['/settings/account/careTeams', careteam.systemID]"
                                    (click)="setBackToMainNav(careteam.systemID)"
                                    >Manage</span
                                >
                                <span class="txt-link hyper-hover cursor-pointer" (click)="openDeletionModel(careteam.systemID, i)"
                                    >Delete</span
                                >
                            </div>
                        </td>
                    </tr>
                </ng-template>
                 <ng-template pTemplate="footer" >
                    <p-button *ngIf="!isCareTeamManage" label="New" (click)="newCareTeam()"></p-button>
                 </ng-template>
            </p-table>



        </ng-container>
        <ng-template #empty>
            <div class="emptyMsg py-4">{{ emptyMsg }}</div>
        </ng-template>
    </div>
</div>

<p-confirmDialog></p-confirmDialog>

<div class="center-screen" *ngIf="isLoading">
    <div  class="spinner "></div>
</div>
    

Answer 1

如果您使用摘要模板，您可以在表格上放置适当的页脚。

<ng-template pTemplate="summary">
    <div class="flex align-items-center justify-content-between">
     In total there are {{ this.count }} products.</div>
</ng-template>