?

1 前提準(zhǔn)備

　　1.1 創(chuàng)建一個(gè)angular項(xiàng)目

　　1.2 將 Ant Design 整合到 Angular 項(xiàng)目中

　　1.3 官方文檔

　　　　點(diǎn)擊前往

?

2 簡(jiǎn)單使用

<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; // 只要有選中但是不是全部選中就會(huì)變成truedisplayData = []; // 存放本頁數(shù)據(jù)data = [ // 模擬后臺(tái)數(shù)據(jù) {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; // 獲取本頁數(shù)據(jù)// console.log(this.displayData);alert("currentPageDataChange");this.refreshStatus(); // 刷新操作 }/** 選中一行后觸發(fā)被觸發(fā)的方法 */refreshStatus(): void {alert("refreshStatus");const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true); // 判斷是否選中所有行（PS：針對(duì)有效的）const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked); // 判斷是否所有的沒被選中（PS:針對(duì)無效的）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組件接收的數(shù)據(jù)類型必須是數(shù)組類型；nz-table 組件的 nzData 屬性用來接收需要展現(xiàn)的數(shù)據(jù)

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

　　　　　　　　

　　　　2.1.2?nzIndeterminate 屬性

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

　　　　2.1.3 nzDisabled 屬性

　　　　　　接收 boolean 類型數(shù)據(jù)，該屬性表示該行數(shù)據(jù)是否有效；如果為 true 表示數(shù)據(jù)有效，反之?dāng)?shù)據(jù)無效

　　2.2 nz-table 組件的事件

　　　　2.2.1 nzCurrentPageDataChange 事件

　　　　　　該事件用來獲取當(dāng)前頁的所有展現(xiàn)出來的數(shù)據(jù)；在進(jìn)行翻頁操作的時(shí)候就會(huì)觸發(fā)該方法

　　　　　　技巧01：table組件默認(rèn)每頁顯示10條數(shù)據(jù)

　　　　　　技巧02：可以利用 nzCurrentPageDataChange 來獲取當(dāng)頁數(shù)據(jù)；但是需要自己編寫對(duì)應(yīng)的時(shí)間處理方法， 例如

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

　　　　2.2.2 nzPageIndexChange 事件

　　　　2.2.3 nzPageSizeChange 事件

　　　　2.2.3 nzCheckedChange 事件

　　　　　　復(fù)選框被選中時(shí)觸發(fā)的事件

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

　　　　　　技巧02：如果 nzCheckedChange 用在除表頭以外的行時(shí)可以用于獲取當(dāng)前行數(shù)據(jù)

　　　　　　技巧03：nzCheckedChange 對(duì)應(yīng)的事件處理方法需要自己定義， 例如：

/** 選中一行后觸發(fā)被觸發(fā)的方法 */refreshStatus(): void {alert("refreshStatus");const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true); // 判斷是否選中所有行（PS：針對(duì)有效的）const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked); // 判斷是否所有的沒被選中（PS:針對(duì)無效的）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 文件中調(diào)用自定義方法時(shí)傳入的實(shí)參是 $event, 那么自定義處理?nzCheckedChange 的方法的形參就只能是 boolean 類型；當(dāng)然將形參指定文任意值，然后在html中調(diào)用時(shí)隨便傳入即可，最常見的做法就是將選中行的數(shù)據(jù)傳過去

　　2.3 nz-table 組件的指令

　　　　2.3.1 nzShowCheckbox 指令

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

　　2.4 nz-table 組件的雙向綁定

　　　　2.4.1 nzChecked 雙向綁定

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

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

?

3 選擇和操作

　　

<!-- 處理選中的數(shù)據(jù) start --> <div style="margin-bottom: 16px;"><button nz-button [disabled]="disabledButton" [nzType]="'primary'" [nzLoading]="operating" (click)="operateData()">執(zhí)行選中</button><span style="margin-left: 8px;" *ngIf="checkedNumber">Selected {{checkedNumber}} items</span> </div> <!-- 處理選中的數(shù)據(jù) 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; // 選中行數(shù)displayData: Array<{ name: string; age: number; address: string; checked: boolean }> = []; // 選中的數(shù)據(jù)operating = false; // 操作樣式是否生效dataSet = []; // 模擬后臺(tái)數(shù)據(jù)indeterminate = false; // 是否還有不確定的/** 獲取當(dāng)前頁數(shù)據(jù) */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); // 判斷有效數(shù)據(jù)是否全部選中const allUnChecked = this.displayData.every(value => !value.checked); // 判斷無效數(shù)據(jù)是否都沒選中this.allChecked = allChecked; // 刷新是否全選中this.indeterminate = (!allChecked) && (!allUnChecked); // 刷新是否有不確定數(shù)據(jù)this.disabledButton = !this.dataSet.some(value => value.checked); // 刷新按鈕是否有效(PS:只要有有效數(shù)據(jù)被選中disabledButton就會(huì)變成false)this.checkedNumber = this.dataSet.filter(value => value.checked).length; // 刷新選中行數(shù) }/** 全選事件執(zhí)行方法 + 刷新 */checkAll(value: boolean): void {this.displayData.forEach(data => data.checked = value);this.refreshStatus();}/** 數(shù)據(jù)處理方法 */operateData(): void {this.operating = true; // 使數(shù)據(jù)操作樣式生效// 延時(shí)1秒鐘來模擬數(shù)據(jù)操作setTimeout(_ => {// 官方例子：對(duì)選中的數(shù)據(jù)進(jìn)行取消選中操作// this.dataSet.forEach(value => value.checked = false); // 數(shù)據(jù)操作完成后將所有選中的數(shù)據(jù)變成未選中狀態(tài)// 三少的例子：刪除被選中的數(shù)據(jù)let newData = [];newData = this.dataSet.filter(value => value.checked == false);this.dataSet = newData;this.refreshStatus(); // 刷新this.operating = false; // 使數(shù)據(jù)操作樣式失效}, 1000);}ngOnInit(): void {// 模擬數(shù)據(jù)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

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/NeverCtrl-C/p/9066893.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。