ng-zrror采坑秘籍

1. table 谷歌内核48版本

问题：1. 无粘性定位，无法固定收尾两列

<nz-table
      #groupingTable
      [nzData]="listOfData"
      nzBordered
      nzSize="small"
      nzTableLayout="fixed"
      nzAlign="center"
      [nzShowPagination]="false"
      [nzScroll]="scroll"
      [nzWidthConfig]="['130px']"
    >
      <thead>
        <tr>
          <th
            rowSpan="2"
            nzLeft
            [ngClass]="{ 'date-th': this.colName.length > 3 }"
          >
            时间
          </th>
          <ng-container *ngFor="let item of colName">
            <th colspan="5">{{ item.name }}</th>
          </ng-container>
          <th
            rowspan="2"
            nzRight
            [ngClass]="{ 'num-th': this.colName.length > 3 }"
          >
            总数
          </th>
        </tr>
        <tr>
          <th
            *ngIf="this.colName.length > 3"
            nzLeft
            [ngClass]="{ erj: this.colName.length > 3 }"
          >
            <div style="visibility: hidden">{{ "1 " }}</div>
          </th>
          <ng-container
            style="position: absolute; left: 130px"
            *ngFor="let item of colName"
          >
            <th [nzEllipsis]="this.colName.length < 3 ? 'false' : 'true'">
              未结工单总数
            </th>
            <th [nzEllipsis]="this.colName.length < 3 ? 'false' : 'true'">
              待生产数
            </th>
            <th [nzEllipsis]="this.colName.length < 3 ? 'false' : 'true'">
              SMT未结数
            </th>
            <th [nzEllipsis]="this.colName.length < 3 ? 'false' : 'true'">
              DIP未结数
            </th>
            <th [nzEllipsis]="this.colName.length < 3 ? 'false' : 'true'">
              维修未结数
            </th>
          </ng-container>
          <!-- <th
            *ngIf="this.colName.length > 3"
            nzRight
            [ngClass]="{ two: this.colName.length > 3 }"
          >
            <div style="visibility: hidden">{{ "1 " }}</div>
          </th> -->
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of groupingTable.data">
          <td nzLeft [ngClass]="{ one: this.colName.length > 3 }">
            {{ data.date }}
          </td>
          <ng-container *ngFor="let item of data.children">
            <td>
              <a (click)="JumpToView(item, data.date, '')">{{
                item.workOrderOpen
              }}</a>
            </td>
            <td>
              <a (click)="JumpToView(item, data.date, 'WAIT')">{{
                item.productionOpen
              }}</a>
            </td>
            <td>
              <a (click)="JumpToView(item, data.date, 'SMT')">{{
                item.smtOpen
              }}</a>
            </td>
            <td>
              <a (click)="JumpToView(item, data.date, 'DIP')">{{
                item.dipOpen
              }}</a>
            </td>
            <td>
              <a (click)="JumpToView(item, data.date, 'REPAIR')">{{
                item.repairOpen
              }}</a>
            </td>
          </ng-container>
          <td nzRight [ngClass]="{ two: this.colName.length > 3 }">
            {{ data.tergetNum }}
          </td>
        </tr>
      </tbody>
    </nz-table>
.date-th {
  position: absolute;
  text-align: center;
  width: 130px;
  left: 0px;
  border-bottom: 1px solid #fafafa;
  z-index: 3;
  line-height: 4.3;
}
.num-th {
  position: absolute;
  text-align: center;
  width: 130px;
  right: 0px;
  border-bottom: 1px solid #fafafa;
  z-index: 3;
  line-height: 4.3;
}
.erj {
  position: absolute !important;
  text-align: center;
  width: 130px;
  left: 0px;
}
.one {
  position: absolute;
  text-align: center;
  width: 130px;
  left: 0px;
}
.two {
  position: absolute;
  text-align: center;
  width: 130px;
  right: 0px;
}

2. 树下拉框 （nz-tree-select）

<nz-tree-select
  #treeSelect
  [nzDisabled]="
  validateFormTypeChild.value.BadReasonsCode !==
    'BadSelfControl'
  "
  nzPlaceHolder="请选择"
  nzShowSearch
  [nzDropdownClassName]="'nzDropdownClassName'"
  [nzNodes]="deptArr"
  (ngModelChange)="onChange($event)"
  formControlName="DeptNo"
></nz-tree-select>
@ViewChild('treeSelect') treeSelect;
onChange(e) {
    const arr: NzTreeNode = this.treeSelect.getSelectedNodeList() as NzTreeNode;
    if (arr) {
      this.validateFormTypeChild.patchValue({
        DeptName: arr[0]?.origin?.deptName ?? '',
      });
    }
    this.cdr.markForCheck();
    this.cdr.detectChanges();
  }
// 部门
  setTreeData(data) {
    let result;
    const map = {};
    data.forEach(item => {
      item.title = item.deptName;
      item.key = item.deptId;
      if (!item.hasChild) {
        item.isLeaf = true;
      }
      map[item.deptId] = item;
    });
    // console.log(map);
    data.forEach(item => {
      const parent = map[item.pDeptId];
      if (parent) {
        (parent.children || (parent.children = [])).push(item);
      } else {
        // 这里push的item是pDeptId为null的数据
        result = item;
      }
    });
    return result;
  }