zorro表格tanle可编辑行，可添加行，删除避坑

可直接赋值官网上面的可编辑行的代码后进行修改

 <nz-table
        class="table-content mB12"
        #editRowTable
        nzBordered
        [nzData]="doctorTable"
        nzTableLayout="fixed"
        [nzFrontPagination]="false"
        [nzShowPagination]="false"
        [nzScroll]="{ x: '100%', y: 'calc(100% - 330px)' }"
        nzTableLayout="fixed"
      >
        <thead>
          <tr>
            <th nzWidth="80px">工号</th>
            <th nzWidth="100px">姓名</th>
            <th nzWidth="120px">科室</th>
            <th nzWidth="120px">职称</th>
            <th nzWidth="130px">联系方式</th>
            <th nzWidth="70px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of editRowTable.data">
            <ng-container *ngIf="!editCache[data.id].edit; else editTemplate">
              <td>{{ data.name }}</td>
              <td>{{ data.age }}</td>
              <td>{{ data.age }}</td>
              <td>{{ data.age }}</td>
              <td>{{ data.address }}</td>
              <td>
                <button nz-button nzType="text" nzDanger (click)="showConfirm()">
                  <i nz-icon nzType="delete-thin" nzTheme="outline"></i>
                </button>

                <a (click)="startEdit(data.id)">Edit</a>
              </td>
            </ng-container>
            <ng-template #editTemplate>
              <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.name" /></td>
              <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.age" /></td>
              <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.age" /></td>
              <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.age" /></td>
              <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.address" /></td>
              <td>
                <button nz-button nzType="primaryText" (click)="saveEdit(data.id)">保存</button>
             

                <a nz-popconfirm nzPopconfirmTitle="Sure to cancel?" (nzOnConfirm)="cancelEdit(data.id)">取消</a>
              </td>
            </ng-template>
          </tr>
        </tbody>
      </nz-table>

      <button nz-button nzType="biz" style="margin-left: 12px" (click)="addRow()">
        <i nz-icon nzType="add" nzTheme="outline"></i>
      </button>

  // 医生表格
  doctorTable: any[] = [
    { id: '1', name: '11', age: 11, address: '11' },
    { id: '2', name: '22', age: 22, address: '22' }
  ];

  editCache: { [key: string]: { edit: boolean; data: ItemData } } = {};

  startEdit(id: string): void {
    this.editCache[id].edit = true;
  }

  // 新增
  addRow(): void {
    // 可取表格最后一条id+1
    this.doctorTable = [
      ...this.doctorTable,
      {
        id: '21',
        name: ``,
        age: 0,
        address: ``
      }
    ];

    this.editCache['21'] = {
      data: {
        id: '21',
        name: ` `,
        age: 0,
        address: ``
      },
      edit: true
    };
    console.log(this.editCache);
  }

  // 取消编辑
  cancelEdit(id: string): void {
        this.doctorTable = this.doctorTable.filter((d) => d.id !== id);
    // this.doctorTable.splice(this.doctorTable.length - 1, 1);

    delete this.editCache[id];
  }

  saveEdit(id: string): void {
    const index = this.doctorTable.findIndex((item) => item.id === id);
    Object.assign(this.doctorTable[index], this.editCache[id].data);
    this.editCache[id].edit = false;
  }

  // 更新该项是否是编辑状态
  updateEditCache(): void {
    this.doctorTable.forEach((item) => {
      this.editCache[item.id] = {
        edit: false,
        data: { ...item }
      };
    });
  }

  // 删除
  showConfirm(): void {
    this.modal.confirm({
      nzTitle: '提示',
      nzContent: '确定删除么',
      nzOnOk: () => console.log('OK')
    });
  }
  ngOnInit(): void {
    this.updateEditCache();
  }

在删除的地方遇到了一个坑

本来我使用splice方法来删除表格数据的，this.doctorTable.splice(this.doctorTable.length - 1, 1)，但是项目会报错

主要原因是splice方法把原数组修改掉了 所以报错了 使用filter函数不会改变原数组 ，后改用filter

cancelEdit

这个方法不够完善， 我现在运用到是没用编辑的，只需要新增删除，可以再加一个字段判断一下是新增的编辑还是编辑