?

1 前提準備

　　1.1 創建一個angular項目

　　1.2 將 Ant Design 整合到 Angular 項目中

　　1.3 官方文檔

　　　　點擊前往

?

2 簡單使用

<nz-table#rowSelectionTable[nzData]="data"(nzCurrentPageDataChange)="currentPageDataChange($event)"(nzPageIndexChange)="refreshStatus()"(nzPageSizeChange)="refreshStatus()"><thead><tr><th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th><th>Name</th><th>Age</th><th>Address</th></tr></thead><tbody><tr *ngFor="let data of rowSelectionTable.data"><td nzShowCheckbox [(nzChecked)]="data.checked" [nzDisabled]="data.disabled" (nzCheckedChange)="refreshStatus($event)"></td><td>{{data.name}}</td><td>{{data.age}}</td><td>{{data.address}}</td></tr></tbody> </nz-table> .html import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';@Component({selector: 'app-test-demo',templateUrl: './test-demo.component.html',styleUrls: ['./test-demo.component.css'] }) export class TestDemoComponent implements OnInit {allChecked = false; // 判斷是否全部被選中（PS: 有效的全部被選中）indeterminate = false; // 只要有選中但是不是全部選中就會變成truedisplayData = []; // 存放本頁數據data = [ // 模擬后臺數據 {name : 'John Brown',age : 32,address : 'New York No. 1 Lake Park',checked : false,disabled: false},{name : 'Jim Green',age : 42,address : 'London No. 1 Lake Park',checked : false,disabled: false},{name : 'Joe Black',age : 32,address : 'Sidney No. 1 Lake Park',checked : false,disabled: false},{name : 'Disabled User',age : 32,address : 'Sidney No. 1 Lake Park',checked : false,disabled: true}];ngOnInit() {}currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {this.displayData = $event; // 獲取本頁數據// console.log(this.displayData);alert("currentPageDataChange");this.refreshStatus(); // 刷新操作 }/** 選中一行后觸發被觸發的方法 */refreshStatus(): void {alert("refreshStatus");const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true); // 判斷是否選中所有行（PS：針對有效的）const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked); // 判斷是否所有的沒被選中（PS:針對無效的）this.allChecked = allChecked;this.indeterminate = (!allChecked) && (!allUnChecked);}// 選中所有行（PS:有效的所有行）checkAll(value: boolean): void {alert("checkAll");this.displayData.forEach(data => {if (!data.disabled) {data.checked = value;}});this.refreshStatus();}} .ts

　　2.1 nz-table 組件的屬性

　　　　2.1.1 nzData 屬性

?

　　　　　　antD的table組件接收的數據類型必須是數組類型；nz-table 組件的 nzData 屬性用來接收需要展現的數據

　　　　　　技巧01：如果使用了 nzData 屬性來接收數據的話，就可以為 nz-table 組件指定一個模板變量，然后就可以用這個模板變量來獲取 nzData 屬性接收到的數據了

　　　　　　　　

　　　　2.1.2?nzIndeterminate 屬性

　　　　　　判斷是否還有有效數據沒被選中，如果所有的有效數據都被選中或者所有有效數據都沒被選中?nzIndeterminate 就為 false; 如果只有部分有效數據被選中就為 true

　　　　2.1.3 nzDisabled 屬性

　　　　　　接收 boolean 類型數據，該屬性表示該行數據是否有效；如果為 true 表示數據有效，反之數據無效

　　2.2 nz-table 組件的事件

　　　　2.2.1 nzCurrentPageDataChange 事件

　　　　　　該事件用來獲取當前頁的所有展現出來的數據；在進行翻頁操作的時候就會觸發該方法

　　　　　　技巧01：table組件默認每頁顯示10條數據

　　　　　　技巧02：可以利用 nzCurrentPageDataChange 來獲取當頁數據；但是需要自己編寫對應的時間處理方法， 例如

currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; disabled: boolean; }>): void {this.displayData = $event; // 獲取本頁數據// console.log(this.displayData);alert("currentPageDataChange");this.refreshStatus(); // 刷新操作}

　　　　2.2.2 nzPageIndexChange 事件

　　　　2.2.3 nzPageSizeChange 事件

　　　　2.2.3 nzCheckedChange 事件

　　　　　　復選框被選中時觸發的事件

　　　　　　技巧01：如果 nzCheckedChange 用在表頭可以用于選中所有有效數據

　　　　　　技巧02：如果 nzCheckedChange 用在除表頭以外的行時可以用于獲取當前行數據

　　　　　　技巧03：nzCheckedChange 對應的事件處理方法需要自己定義， 例如：

/** 選中一行后觸發被觸發的方法 */refreshStatus(): void {alert("refreshStatus");const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true); // 判斷是否選中所有行（PS：針對有效的）const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked); // 判斷是否所有的沒被選中（PS:針對無效的）this.allChecked = allChecked;this.indeterminate = (!allChecked) && (!allUnChecked);}// 選中所有行（PS:有效的所有行）checkAll(value: boolean): void {alert("checkAll");this.displayData.forEach(data => {if (!data.disabled) {data.checked = value;}});this.refreshStatus();} View Code

　　　　　　技巧04：如果在 html 文件中調用自定義方法時傳入的實參是 $event, 那么自定義處理?nzCheckedChange 的方法的形參就只能是 boolean 類型；當然將形參指定文任意值，然后在html中調用時隨便傳入即可，最常見的做法就是將選中行的數據傳過去

　　2.3 nz-table 組件的指令

　　　　2.3.1 nzShowCheckbox 指令

　　　　　　增加 nzShowCheckbox 后的th/td將獲得和 nz-checkbox 一樣的功能，即：成為一個復選框

　　2.4 nz-table 組件的雙向綁定

　　　　2.4.1 nzChecked 雙向綁定

　　　　　　nzChecked 接收 boolean 類型的數據；他的作用是指定復選框是否被選中；nzChecked 為 true 時表示選中，反之未選中

　　　　　　技巧01：nzChecked 只能用在使用了 nzShowCheckbox 的 th/td 上

?

3 選擇和操作

　　

<!-- 處理選中的數據 start --> <div style="margin-bottom: 16px;"><button nz-button [disabled]="disabledButton" [nzType]="'primary'" [nzLoading]="operating" (click)="operateData()">執行選中</button><span style="margin-left: 8px;" *ngIf="checkedNumber">Selected {{checkedNumber}} items</span> </div> <!-- 處理選中的數據 end --><nz-table#rowSelectionTable[nzData]="dataSet"(nzCurrentPageDataChange)="currentPageDataChange($event)"(nzPageIndexChange)="refreshStatus()"(nzPageSizeChange)="refreshStatus()"><thead><tr><th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th><th>Name</th><th>Age</th><th>Address</th></tr></thead><tbody><tr *ngFor="let data of rowSelectionTable.data"><td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus($event)"></td><td>{{data.name}}</td><td>{{data.age}}</td><td>{{data.address}}</td></tr></tbody> </nz-table> .html import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http';@Component({selector: 'app-test-demo',templateUrl: './test-demo.component.html',styleUrls: ['./test-demo.component.css'] }) export class TestDemoComponent implements OnInit {allChecked = false; // 是否全部選中disabledButton = true; // 按鈕是否失效checkedNumber = 0; // 選中行數displayData: Array<{ name: string; age: number; address: string; checked: boolean }> = []; // 選中的數據operating = false; // 操作樣式是否生效dataSet = []; // 模擬后臺數據indeterminate = false; // 是否還有不確定的/** 獲取當前頁數據 */currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean }>): void {this.displayData = $event;console.log(this.displayData);}/** 刷新 */refreshStatus(): void {const allChecked = this.displayData.every(value => value.checked === true); // 判斷有效數據是否全部選中const allUnChecked = this.displayData.every(value => !value.checked); // 判斷無效數據是否都沒選中this.allChecked = allChecked; // 刷新是否全選中this.indeterminate = (!allChecked) && (!allUnChecked); // 刷新是否有不確定數據this.disabledButton = !this.dataSet.some(value => value.checked); // 刷新按鈕是否有效(PS:只要有有效數據被選中disabledButton就會變成false)this.checkedNumber = this.dataSet.filter(value => value.checked).length; // 刷新選中行數 }/** 全選事件執行方法 + 刷新 */checkAll(value: boolean): void {this.displayData.forEach(data => data.checked = value);this.refreshStatus();}/** 數據處理方法 */operateData(): void {this.operating = true; // 使數據操作樣式生效// 延時1秒鐘來模擬數據操作setTimeout(_ => {// 官方例子：對選中的數據進行取消選中操作// this.dataSet.forEach(value => value.checked = false); // 數據操作完成后將所有選中的數據變成未選中狀態// 三少的例子：刪除被選中的數據let newData = [];newData = this.dataSet.filter(value => value.checked == false);this.dataSet = newData;this.refreshStatus(); // 刷新this.operating = false; // 使數據操作樣式失效}, 1000);}ngOnInit(): void {// 模擬數據for (let i = 0; i < 46; i++) {this.dataSet.push({name : `Edward King ${i}`,age : 32,address: `London, Park Lane no. ${i}`,checked: false});}}} .ts

?

?

?

轉載于:https://www.cnblogs.com/NeverCtrl-C/p/9066893.html

總結

以上是生活随笔為你收集整理的AntD02 Table组件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。