如果你用到了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(){ }
//表格选中的样式处理
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事件。
原文地址：https://www.cnblogs.com/myyouzi/p/12200136.html