nz-table复选功能改造（整行可选）

如果你用到了nz-table组件，而且有勾选列表的需求时，就可以用该组件自带的nzShowCheckbox勾选属性，用法如下：

<nz-table
      #rowSelectionTable
      nzShowPagination
      nzShowSizeChanger
      [nzData]=""
      (nzCurrentPageDataChange)=""
    >
      <thead>
        <tr>
          <th
            nzShowCheckbox
            [(nzChecked)]=""
            [nzIndeterminate]=""
            (nzCheckedChange)=""
          ></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of rowSelectionTable.data">
          <td
            nzShowCheckbox
            [(nzChecked)]=""
            (nzCheckedChange)=""
          ></td>
        </tr>
      </tbody>
</nz-table>

第一列是联动的选择框，增加 nzShowCheckbox 后，th 获得和 nz-checkbox 一样的功能，选择后进行操作，完成后清空选择，请注意：数据逻辑需要自行控制。

数据方面组件案例定义了一个mapOfCheckedId对象，可以把数据里用于唯一标识的id或其他字段的值存入该对象，然后通过改变它的值（boolean）去控制列表行要不要勾选。

//ts文件定义：

mapOfCheckedId: { [key: string]: boolean } = {};

//html文件:

<nz-table
      #rowSelectionTable
      nzShowPagination
      nzShowSizeChanger
      [nzData]=""
      (nzCurrentPageDataChange)=""
    >
      <thead>
        <tr>
          <th
            nzShowCheckbox
            [(nzChecked)]=""
            [nzIndeterminate]=""
            (nzCheckedChange)=""
          ></th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of rowSelectionTable.data">
          <td
            nzShowCheckbox
            [(nzChecked)]="mapOfCheckedId[data.id]"
            (nzCheckedChange)=""
          ></td>
        </tr>
      </tbody>
</nz-table>

列表勾选除了要控制数据逻辑，还需自行设置样式。组件提供了[nzIndeterminate]属性控制勾选样式（主要用于设置th的复选框css），th的复选框可以有三种状态：空、‘√’、‘-’，这里需要和它的[nzChecked]属性配合使用：

[nzIndeterminate]	[nzChecked]	css显示
true	true	-
false	true	√
false	false	无css

ts:

export class InterviewListComponent implements OnInit{
　　mapOfCheckedId: { [key: string]: boolean } = {}；
    allListCheck = {
        allChecked: false,
        indeterminate: false
    };
    constructor() { }
    ngOnInit(){ }

　　//获取表格数据
　　getTableList(){
　　　　//请求...
　　　　this.dataTable = res.data
　　　　this.refreshStatus() //每次请求完数据重置表格勾选状态
　　}

　　 //表格选中的样式处理
   　refreshStatus(): void {
     　　this.dataTable.forEach((item, i) => {
      　 　　if (this.mapOfCheckedId[item.candidateId]) {
       　　 　　 if (!this.checkedData.some(items => items.candidateId === item.candidateId)) { this.checkedData.push(item); }
     　　　　} else {
        　　　　 this.checkedData = this.checkedData.filter(items => items.candidateId !== item.candidateId);
      　　　 }
    　　　});
    　　 //设置全选checkbox的样式
    　　 if (this.dataTable.every(item => this.mapOfCheckedId[item.candidateId] )){
     　　　　this.allListCheck.allChecked = true;
      　　　 this.allListCheck.indeterminate = false;
    　　 }else{
      　　　 this.allListCheck.allChecked = false;
      　　　 this.allListCheck.indeterminate = this.dataTable.some(item => this.mapOfCheckedId[item.candidateId]);
    　　 }
    　　 this.copyCheckData = JSON.parse(JSON.stringify(this.checkedData));
  　　}
  　　checkAll(value: boolean): void {
    　　    this.dataTable.forEach(item => this.mapOfCheckedId[item.candidateId] = value);
    　　　　this.refreshStatus();

     }
  　　clearChecked(){
    　　　this.checkedData = [];
   　　 　this.copyCheckData = [];
    　　　this.mapOfCheckedId = {};
    　　　this.allListCheck.allChecked = false;
   　　　 this.allListCheck.indeterminate = false;
  　　}

}

html:

<nz-table [nzLoading]="loading" #activeTable [nzData]="dataTable" [nzShowPagination]=false　[nzFrontPagination]="false">
    <thead>
    　  <tr>
        　　<th  width="34" nzShowCheckbox [nzChecked]="allListCheck.allChecked" [nzIndeterminate]="allListCheck.indeterminate" (nzCheckedChange)="checkAll($event)"></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of activeTable.data;let i=index" [ngClass]="{'checked':mapOfCheckedId[data.candidateId]}">
        　　<td
              nzShowCheckbox
              [(nzChecked)]="mapOfCheckedId[data.candidateId]"(nzCheckedChange)="refreshStatus()"
            ></td>            
        </tr>
    </tbody>
</nz-table>

这样就可以实现表格复选功能了，但是只能在点击复选框时才能进行勾选，想要整行都可以，就需要再改造下：

ts:

export class InterviewListComponent implements OnInit{
　　mapOfCheckedId: { [key: string]: boolean } = {}；
    allListCheck = {
        allChecked: false,
        indeterminate: false
    };
    constructor() { }
    ngOnInit(){}
　  selectedTr(data){
    　　this.mapOfCheckedId[data.candidateId] = !this.mapOfCheckedId[data.candidateId];
    　　this.refreshStatus();
    }

　　 //表格选中的样式处理
   　refreshStatus(): void {
     　　this.dataTable.forEach((item, i) => {
      　 　　if (this.mapOfCheckedId[item.candidateId]) {
       　　 　　 if (!this.checkedData.some(items => items.candidateId === item.candidateId)) { this.checkedData.push(item); }
     　　　　} else {
        　　　　 this.checkedData = this.checkedData.filter(items => items.candidateId !== item.candidateId);
      　　　 }
    　　　});
    　　 //设置全选checkbox的样式
    　　 if (this.dataTable.every(item => this.mapOfCheckedId[item.candidateId] )){
     　　　　this.allListCheck.allChecked = true;
      　　　 this.allListCheck.indeterminate = false;
    　　 }else{
      　　　 this.allListCheck.allChecked = false;
      　　　 this.allListCheck.indeterminate = this.dataTable.some(item => this.mapOfCheckedId[item.candidateId]);
    　　 }
    　　 this.copyCheckData = JSON.parse(JSON.stringify(this.checkedData));
  　　}
  　　checkAll(value: boolean): void {
    　 let newValue = !value;
    　　　 this.dataTable.forEach(item => this.mapOfCheckedId[item.candidateId] = newValue);
    　　　 this.refreshStatus();

     }
  　　clearChecked(){
    　　　this.checkedData = [];
   　 　　this.copyCheckData = [];
    　　　this.mapOfCheckedId = {};
    　　　this.allListCheck.allChecked = false;
   　　 　this.allListCheck.indeterminate = false;
  　　}

}

html:

<nz-table [nzLoading]="loading" #activeTable [nzData]="dataTable" [nzShowPagination]=false　[nzFrontPagination]="false">
    <thead>
    　  <tr (click)="checkAll(allListCheck.allChecked)">
            <th  width="34" nzShowCheckbox [nzChecked]="allListCheck.allChecked" [nzIndeterminate]="allListCheck.indeterminate" (click)="checkAll(allListCheck.allChecked);$event.stopPropagation()"></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of activeTable.data;let i=index" [ngClass]="{'checked':mapOfCheckedId[data.candidateId]}" (click)="selectedTr(data)">
        　　<td
              nzShowCheckbox
              [(nzChecked)]="mapOfCheckedId[data.candidateId]"
              　　(click)="refreshStatus();$event.stopPropagation()"
            ></td>            
        </tr>
    </tbody>
</nz-table>

说明一下：在tr上设置了点击事件后，td复选框原本的（nzCheckedChange）就不能再用了，需要改成click事件。