配置 nz-table 表单页脚总页数与条数显示 - Angul

日常开发中表单使用很常见，正巧刚使用完，此次对 nz-table 的表单页脚显示总数据条数和当前页进行配置小结；

具体基础用法可以参考 官方文档 nz-table 集成，如下是对页脚总页数和条数配置的拓展：
注：需要预先声明好当前页码和数据总条数的字段并从接口数据中赋值

首先，在获取到页码和数据总条数的基础上配置页脚模板
当前页码可以通过组件中的 [nzPageIndex]="pageIndex" 获取；
数据总条数可以通过数据源数组的 length 获取；

<ng-template #totalTemplate let-total> 总共 {{ total }} 条记录</ng-template>

其次，需要在 nz-table 中配置 [nzShowTotal]="totalTemplate" 属性

<nz-table #rowSelectionTable
              (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
              (nzPageIndexChange)="changePageIndex($event)"
              (nzPageSizeChange)="changePageSize($event)"
              [nzData]="listOfData"
              [nzFrontPagination]="false"
              [nzLoading]="loadingTable"
              [nzPageIndex]="pageIndex"
              [nzPageSize]="pageSize"
              [nzShowTotal]="totalTemplate"
              [nzTotal]="total"
              class="nz-table-content"
              nzShowSizeChanger
              nzSize="middle"
    >

最后，完整 code 如下：

<div>
    <nz-table #rowSelectionTable
              (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
              (nzPageIndexChange)="changePageIndex($event)"
              (nzPageSizeChange)="changePageSize($event)"
              [nzData]="listOfData"
              [nzFrontPagination]="false"
              [nzLoading]="loadingTable"
              [nzPageIndex]="pageIndex"
              [nzPageSize]="pageSize"
              [nzShowTotal]="totalTemplate"
              [nzTotal]="total"
              class="nz-table-content"
              nzShowSizeChanger
              nzSize="middle"
    >
        <thead>
        <tr>
            <th (nzCheckedChange)="onAllChecked($event)"
                [(nzChecked)]="checked"
                [nzIndeterminate]="indeterminate"
                nzLeft
                nzShowCheckbox
                nzWidth="40px"
            ></th>
            <th nzAlign="center" nzLeft nzWidth="80px"
            >状态
            </th>
            <th nzAlign="center" nzLeft nzWidth="160px"
            >姓名
            </th>
            <th nzAlign="center" nzWidth="50px"
            >性别
            </th>
            <th nzAlign="center" nzWidth="160px"
            >证件号
            </th>
            <th nzAlign="center" nzWidth="150px"
            >手机号
            </th>
            <th nzAlign="center" nzWidth="160px"
            >工号
            </th>
            <th nzAlign="center" nzWidth="200px"
            >创建时间
            </th>
            <th nzAlign="center" nzWidth="170px"
            >创建人
            </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of rowSelectionTable.data">
            <td (nzCheckedChange)="onItemChecked(data.id, $event)"
                [nzChecked]="setOfCheckedId.has(data.id)"
                nzLeft
            ></td>
            <!--状态-->
            <td nzAlign="center" nzLeft nzWidth="80px">
                {{data.exam_qualification === 'conform' ? '正常' : data.exam_qualification === 'incoform' ? '不正常' : '全部' }}
            </td>
            <!--姓名-->
            <td nzAlign="center" nzLeft nzWidth="180px">{{ data.member_name }}</td>
            <!--性别-->
            <td nzAlign="center">{{ data.gender }}</td>
            <!--证件号-->
            <td nzAlign="center">{{ data.member_id_card }}</td>
            <td nzAlign="center">{{ data.member_cellphone }}</td>
            <!--工号-->
            <td nzAlign="center">{{ data.member_number }}</td>
            <!--创建时间-->
            <td nzAlign="center">{{data.addtime}}</td>
            <!--创建人-->
            <td nzAlign="center">{{data.createusername}}</td>
        </tr>
        </tbody>
    </nz-table>
</div>
<ng-template #totalTemplate let-total> 总共 {{ total }} 条记录</ng-template>

实际具体业务还需大家具体分析，如上例子是通过服务端分页的模式实现，但未使用官方 demo 中的服务端实例，而是自行手动配置出发的分页效果，可供参考大家自行改进。

以上便是此次分享的全部内容，希望能对大家有所帮助！