标签：ace init cli 完成 key eterm round selection ali
如果你用到了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(){ }
}
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();
}
}
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事件。
标签：ace init cli 完成 key eterm round selection ali
原文地址：https://www.cnblogs.com/myyouzi/p/12200136.html
