动态生成表格（ng-zorro）

一、环境 ng-cli，ant.design

二、表格

1）html：

 1                 <div class="table-wrap">
 2                 <nz-table
 3                     #indexTable
 4                     [nzData]="indexParam['dataList']"
 5                     [nzBordered]=true
 6                     [nzLoading]="isLoading"
 7                     [nzTotal]="totalNum"
 8                     [nzFrontPagination]=false
 9                     [nzPageIndex]="queryParam['pageNum']"
10                     [nzPageSize]="queryParam['pageSize']"
11                     [nzShowSizeChanger]=true
12                     [nzPageSizeOptions]="[5, 10, 15, 20]"
13                     [nzHideOnSinglePage]=true
14                     [nzShowQuickJumper]=true
15                     [nzShowTotal]="totalTemplate"
16                     (nzPageIndexChange)="handlePageIndexChange($event)"
17                     (nzPageSizeChange)="handlePageSizeChange($event)"
18                 >
19               <thead>
20                 <tr>
21                   <th *ngFor="let head of indexParam['headerList']">{{head}}</th>
22                 </tr>
23               </thead>
24               <tbody>
25                 <tr *ngFor="let data of indexTable.data">
26                     <td *ngFor="let field of indexParam['fieldList']">{{ data[field] }}</td>
27                 </tr>
28               </tbody>
29             </nz-table>
30             <ng-template #totalTemplate>
31               共 {{ totalNum }} 条记录 第 {{ queryParam['pageNum'] }} / {{ pageTotal }} 页
32             </ng-template>
33             </div>

2）ts:

// 指标表格参数

indexParam = {

headerList: ['时间','行业平台','B端总用户数','收费用户数','免费用户数','活跃用户数','活跃率'],

fieldList: ['time','platform','bend','charge','free','activeNum','activeRate'],

dataList: [

{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},

]

};

// 渲染指标表格
  renderIndexTable(data) {
    // this.indexParam['headerList'] = data['headerList'];
    // this.indexParam['fieldList'] = data['fileList'];
    // this.indexParam['dataList'] = data['dataList'];
    // this.totalNum = data['total'];
    // this.pageTotal = Math.ceil(this.totalNum / this.queryParam['pageSize']);
  }

动态生成表格 （ng-zorro）

动态生成表格（ng-zorro）