zoukankan      html  css  js  c++  java
  • 动态生成表格 (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']);
      }
  • 相关阅读:
    C++ Primer 学习笔记_104_特殊工具与技术 --嵌套类
    [AngularJS + Webpack] Requiring CSS & Preprocessors
    [AngularJS + Webpack] Requiring Templates
    [AngularJS + Webpack] ES6 with BabelJS
    [Flux] 3. Actions
    [RxJS] Aggregating Streams With Reduce And Scan using RxJS
    [RxJS] map vs flatMap
    [RxJS] Stream Processing With RxJS vs Array Higher-Order Functions
    [MODx] Solve cannot upload large file
    [React + webpack] hjs-webpack
  • 原文地址:https://www.cnblogs.com/a1-top/p/14178769.html
Copyright © 2011-2022 走看看