一、环境 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%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'time':'2020-12-23','platform':'智慧校园平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},
{'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']); }
posted on
