《Angular之表格操作列》

前言：

   表格几乎是每个项目当中都会涉及到的一种组件，表格也因项目需求不同，所具备的功能不同，此篇博文小编为大家讲述要求操作列根据数据项而显示不同。

正文：

   业务需求：根据表格中的状态不同，操作列显示的内容不同。

   实践技术：Angular4+ng-zorro

   一。原生引用：

   1.html

 <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
      <ng-template #nzFixedHeader>
        <thead nz-thead>
          <tr>
            <th nz-th [nzWidth]="'150px'"><span>Name</span></th>
            <th nz-th [nzWidth]="'150px'"><span>Age</span></th>
            <th nz-th><span>Address</span></th>
          </tr>
        </thead>
      </ng-template>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of nzTable.data">
          <td nz-td>{{data.name}}</td>
          <td nz-td>{{data.age}}</td>
          <td nz-td>{{data.address}}</td>
        </tr>
      </tbody>
    </nz-table>

        2.ts

export class NzDemoTableFixedHeaderComponent implements OnInit {
  data = [];

  constructor() {
  }

  ngOnInit() {
    for (let i = 0; i < 100; i++) {
      this.data.push({
        name   : `Edward King ${i}`,
        age    : 32,
        address: `London, Park Lane no. ${i}`,
      });
    }
  }
}

       3.效果：

       

  二。依据项目而改造

  1.显示项目所需数据

  （1）html

<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
          <ng-template #nzFixedHeader>
            <thead nz-thead>
              <tr><!-- 改变表头 -->
                <th nz-th [nzWidth]="'150px'">
                  <span>机构名称</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>产品名称</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>进件类型</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>流程配置</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>修改人</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>状态</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>最后修改时间</span>
                </th>
              </tr>
            </thead>
          </ng-template>
          <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of nzTable.data">
              <td nz-td>{{data.organizationName}}</td>    <!--改变接收字段-->
              <td nz-td>{{data.productName}}</td>
              <td nz-td>{{data.comeTypeName}}</td>
              <td nz-td>{{data.flowName}}</td>
              <td nz-td>{{data.modifiedId}}</td>
              <td nz-td>{{data.examineStatus}}</td>
              <td nz-td>{{data.lastModifiedTime}}</td>
            </tr>
          </tbody>
        </nz-table>

       （2）.ts

 data = new Array();
  pageSize = 10;
  page = 1;
getData() {
    this.page = 1;
    this.pageSize = 20;
    let url = 'work/ProductFlowConfigController/selectProductRel/' + this.page + '/' + this.pageSize;
    // let url = 'ProductFlowConfigController/selectProductRel/' + this.page + '/' + this.pageSize;
    this.http.get(url).subscribe(
      res => {

        if (res.json().code == '20000') {

          this.data = res.json().data.content;    <!--前后端交互获取数据-->

        } else {
          this.errorInfo = '产品流程配置表格数据初始化失败';
          this.error();
        }

      }
    )
  }

      （3）显示效果图

        2.增加操作列

        （1）html

<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
          <ng-template #nzFixedHeader>
            <thead nz-thead>
              <tr>
                <th nz-th [nzWidth]="'150px'">
                  <span>机构名称</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>产品名称</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>进件类型</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>流程配置</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>修改人</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>状态</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>最后修改时间</span>
                </th>
                <th nz-th [nzWidth]="'150px'">   <!--增加操作列表头-->
                  <span>操作列</span>
                </th>
              </tr>
            </thead>
          </ng-template>
          <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of nzTable.data">
              <td nz-td>{{data.organizationName}}</td>
              <td nz-td>{{data.productName}}</td>
              <td nz-td>{{data.comeTypeName}}</td>
              <td nz-td>{{data.flowName}}</td>
              <td nz-td>{{data.modifiedId}}</td>
              <td nz-td>{{data.examineStatus}}</td>
              <td nz-td>{{data.lastModifiedTime}}</td>
              <td nz-td>    <!--增加操作列内容-->
                <span>
                    <a>配置</a>
                    <a>编辑</a>
                    <a>发布</a>
                </span>
              </td>
            </tr>
          </tbody>
        </nz-table>

       （2）效果图

        3.操作列内容随着状态的改变而不同，同时样式不同

        （1）html

<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
          <ng-template #nzFixedHeader>
            <thead nz-thead>
              <tr>
                <th nz-th [nzWidth]="'150px'">
                  <span>机构名称</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>产品名称</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>进件类型</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>流程配置</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>修改人</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>状态</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>最后修改时间</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>操作列</span>
                </th>
              </tr>
            </thead>
          </ng-template>
          <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of nzTable.data">
              <td nz-td>{{data.organizationName}}</td>
              <td nz-td>{{data.productName}}</td>
              <td nz-td>{{data.comeTypeName}}</td>
              <td nz-td>{{data.flowName}}</td>
              <td nz-td>{{data.modifiedId}}</td>
              <td nz-td>{{data.examineStatus}}</td>
              <td nz-td>{{data.lastModifiedTime}}</td>
              <td nz-td>
                <span>   <!--增加判断，根据状态不同，而操作列显示内容不同-->
                  <div *ngIf="data.examineStatus=='编辑中'||data.examineStatus=='退回待处理'||data.examineStatus=='已发布'">
                    <a class="config_style">配置</a>
                    <a class="edit_style">编辑</a>
                    <a class="release_style">发布</a>
                  </div>
                  <div *ngIf="data.examineStatus=='待审核'">
                      <a disabled="disabled">配置</a>
                      <a disabled="disabled">编辑</a>
                      <a disabled="disabled">发布</a>
                  </div>
                </span>
              </td>
            </tr>
          </tbody>
        </nz-table>

         （2）css样式文件

/* -----------------------操作列：配置按钮样式-------------------- */
.config_style{
    color: darkorchid;
}
/* ------------------------操作列：编辑按钮样式------------------- */
.edit_style{
    color: deeppink;
}
/* -----------------------操作列：发布按钮样式----------------- */
.release_style{
    color: coral;
}

         （3）效果图

            4.操作列内容不同，功能不同

           （1）HTML

<nz-table #nzTable [nzDataSource]="data" [nzPageSize]="50" [nzScroll]="{ y: 240 }">
          <ng-template #nzFixedHeader>
            <thead nz-thead>
              <tr>
                <th nz-th [nzWidth]="'150px'">
                  <span>机构名称</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>产品名称</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>进件类型</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>流程配置</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>修改人</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>状态</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>最后修改时间</span>
                </th>
                <th nz-th [nzWidth]="'150px'">
                  <span>操作列</span>
                </th>
              </tr>
            </thead>
          </ng-template>
          <tbody nz-tbody>
            <tr nz-tbody-tr *ngFor="let data of nzTable.data">
              <td nz-td>{{data.organizationName}}</td>
              <td nz-td>{{data.productName}}</td>
              <td nz-td>{{data.comeTypeName}}</td>
              <td nz-td>{{data.flowName}}</td>
              <td nz-td>{{data.modifiedId}}</td>
              <td nz-td>{{data.examineStatus}}</td>
              <td nz-td>{{data.lastModifiedTime}}</td>
              <td nz-td>
                <span>
                  <div *ngIf="data.examineStatus=='编辑中'||data.examineStatus=='退回待处理'||data.examineStatus=='已发布'">
                    <a class="config_style"  (click)="config(data)">配置</a>    <!--单级不同操作列内容，出发不同功能-->
                    <a class="edit_style" (click)="editInfo(data)">编辑</a>
                    <a class="release_style" (click)="release(data)">发布</a>
                  </div>
                  <div *ngIf="data.examineStatus=='待审核'">
                      <a disabled="disabled">配置</a>
                      <a disabled="disabled">编辑</a>
                      <a disabled="disabled">发布</a>
                  </div>
                </span>
              </td>
            </tr>
          </tbody>
        </nz-table>

        （2）ts

/**
   * 点击配置
   * @param obj 每条数据
   */
  config(obj: any) {
    localStorage.setItem('product_process_id', obj.id);
    localStorage.setItem('product_process_flowId', obj.flowId)
    this.router.navigateByUrl('workspace/risk-process-manage/product-process-config/process-line-manage/process-line-manage');
  }

  /**
   * 点击编辑
   * @param obj 每条数据
   */
  editInfo(obj: any) {

    localStorage.setItem('add_product_process_model', JSON.stringify(obj));
    this.router.navigate(['workspace/risk-process-manage/product-process-config/edit-product-process']);
  }

  /**
   * 点击发布
   * @param obj 每条数据
   */
  release(obj: any) {

    let relId = obj.id;
    let body = '';
    let url = 'work/ProductFlowConfigController/startFlow/' + relId;
    this.http.post(url, body).subscribe(
      res => {
        if (res.json().code == '20000') {
          this.getData();
          this.successInfo = '恭喜您发布成功，状态已更改为待审核，该条数据不可再操作';
          this.success();
        } else {

          this.errorInfo = '发布失败，请联系管理员';
          this.error();

        }
      }
    )
  }

结语：

           向阳而生。