• 动态生成表格 (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%'},
    {'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']);
      }
  • 相关阅读:
    Java 添加、验证PDF 数字签名
    Java 将PDF 转为Word、图片、SVG、XPS、Html、PDF/A
    Java 读取PDF中的文本和图片
    Java 将Word转为PDF、PNG、SVG、RTF、XPS、TXT、XML
    Java 添加、读取、删除PPT文档属性
    Java 添加、修改PPT幻灯片中的表格
    Java 转PPT为图片、PDF、SVG、XPS、ODP以及PPT和PPTX互转
    Java 添加Word脚注、尾注
    Java 添加Word目录的2种方法
    Java 添加Word页眉、页脚
  • 原文地址:https://www.cnblogs.com/a1-top/p/14178769.html
Copyright © 2020-2023  润新知