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事件。