Table表格

展示行列数据。

何时使用#

  • 当有大量结构化的数据需要展现时;
  • 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
import { NzTableModule } from 'ng-zorro-antd/table';

如何使用#

Table 组件同时具备了易用性和高度可定制性

高度定制#

nz-table 组件中完整的暴露了 W3C标准 <table> 的所有组成部分,你可以像使用 table 元素一样使用 nz-table ,根据依据业务需求,使用者可以自由的控制任何一个部分的样式、内容、逻辑和事件绑定。

组件增强#

nz-table, thead, th, td 等多个暴露的元素上,组件提供了增强语法,经过配置之后可以很方便的实现多选、过滤、排序、固定列、固定表头、服务端分页等功能。

数据处理#

将数据传入[nzData],经过组件处理之后(包括分页、排序、筛选等),通过 模板变量 获取当前展示表格部分的数据,使用 *ngFor 依据需求将数据渲染。

<nz-table #basicTable [nzData]="dataSet">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{data.name}}</td>
      <td>{{data.age}}</td>
      <td>{{data.address}}</td>
      <td>
        <a>Action 一 {{data.name}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>Delete</a>
      </td>
    </tr>
  </tbody>
</nz-table>

代码演示

NameAgeAddressAction
John Brown32New York No. 1 Lake ParkAction 一 John BrownDelete
Jim Green42London No. 1 Lake ParkAction 一 Jim GreenDelete
Joe Black32Sidney No. 1 Lake ParkAction 一 Joe BlackDelete

简单的表格,最后一列是各种操作。

expand codeexpand code
加载中
Selected 0 items
NameAgeAddress
Edward King 032London, Park Lane no. 0
Edward King 132London, Park Lane no. 1
Edward King 232London, Park Lane no. 2
Edward King 332London, Park Lane no. 3
Edward King 432London, Park Lane no. 4
Edward King 532London, Park Lane no. 5
Edward King 632London, Park Lane no. 6
Edward King 732London, Park Lane no. 7
Edward King 832London, Park Lane no. 8
Edward King 932London, Park Lane no. 9

第一列是联动的选择框,增加 [nzChecked] 后,th 获得和 nz-checkbox 一样的功能,选择后进行操作,完成后清空选择,请注意:数据逻辑需要自行控制。

expand codeexpand code
加载中
NameAgeAddress
Edward King 032London, Park Lane no. 0
Edward King 132London, Park Lane no. 1
Edward King 232London, Park Lane no. 2
Edward King 332London, Park Lane no. 3
Edward King 432London, Park Lane no. 4
Edward King 532London, Park Lane no. 5
Edward King 632London, Park Lane no. 6
Edward King 732London, Park Lane no. 7
Edward King 832London, Park Lane no. 8
Edward King 932London, Park Lane no. 9

通过 nzSelections 自定义选择项.

expand codeexpand code
加载中
Name Age Address
Jim Green42London No. 1 Lake Park
Jim Red32London No. 2 Lake Park

筛选:对某一列数据进行筛选,通过指定 [nzFilters] 属性来指定筛选菜单,[nzFilterFn] 指定筛选函数,[nzFilterMultiple] 用于指定多选和单选,通过设置 [nzFilters] 中的 { byDefault: true } 属性来默认启用一个筛选器。

排序:对某一列数据进行排序,通过指定 [nzSortOrder] 来指定默认排序顺序,[nzSortFn] 指定排序函数 [nzSortDirections] 改变每列可用的排序方式。

expand codeexpand code
加载中
Name Chinese Score Math Score English Score
John Brown986070
Jim Green986689
Joe Black989070
Jim Red889989

使用 [nzSortPriority] 字段以配置多列排序优先级。通过 [nzSortFn] 配置排序逻辑。

expand codeexpand code
加载中
Name Age Address
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park
Jim Red32London No. 2 Lake Park

修改 [nzSortOrder][nzFilters] 来指定当前列的排序与筛选状态。

expand codeexpand code
加载中
Name AgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park
Jim Red32London No. 2 Lake Park

通过 <nz-filter-trigger> 组件定义自定义的列筛选功能,并实现一个搜索列的示例。

expand codeexpand code
加载中
NameGenderEmail
Marie Andersenfemalemarie.andersen@example.com
Debra Ricefemaledebra.rice@example.com
Susan Caldwellfemalesusan.caldwell@example.com
Nina Karadžićfemalenina.karadzic@example.com
Chaithra Dsouzafemalechaithra.dsouza@example.com
Pranav Kumarimalepranav.kumari@example.com
Manuel Rubiomalemanuel.rubio@example.com
Milton Hayesmalemilton.hayes@example.com
Mariano Valenciamalemariano.valencia@example.com
Yolande Brunetfemaleyolande.brunet@example.com

这个例子通过简单的 ajax 读取方式,演示了如何从服务端读取并展现数据,具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。

  • 分页:使用 [nzFrontPagination]="false" 指定由服务端分页。
  • 排序:使用 [nzSortFn]="true" 指定由服务端排序,如果需要多列排序可使用 [nzSortPriority]="true"
  • 筛选:使用 [nzFilters] 来指定筛选项,使用 [nzFilterFn]="true" 指定由服务端筛选
  • 参数传输:通过 (nzQueryParams) 服务端需要的参数,数据结构为
{
  pageIndex: number;
  pageSize: number;
  sort: Array<{ key: string; value: 'ascend' | 'descend' | null }>;
  filter: Array<{ key: string; value: any | any[] }>;
}

注意,此示例使用 模拟接口,展示数据可能不准确,请打开网络面板查看请求。

expand codeexpand code
加载中

Middle size table

NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park

Small size table

NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park

两种紧凑型的列表,小型列表只用于对话框内。

expand codeexpand code
加载中
Header
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park
Footer
Header
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park
Footer

添加表格边框线,页头和页脚。

expand codeexpand code
加载中
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park

当表格内容较多不能一次性完全展示时,可以通过 td 上的 nzExpand 属性展开。

expand codeexpand code
加载中
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park

当使用 nzExpand 属性时,添加 nzExpandIcon 自定义展开图标。

expand codeexpand code
加载中
NameAgeHome phoneAddress
John Brown320571-2209890918889898989New York No. 1 Lake Park
Jim Green420571-2209833318889898888London No. 1 Lake Park
Joe Black320575-2209890918900010002Sidney No. 1 Lake Park
Jim Red1818900010002London No. 2 Lake Park
Jake White18

W3C标准 <table> 一样,使用 colspanrowspan 合并行/列。

expand codeexpand code
加载中
NameAgeAddress
John Brown sr. 60New York No. 1 Lake Park
Joe Black 32Sidney No. 1 Lake Park

表格支持树形数据的展示,可以通过设置 nzIndentSize 以控制每一层的缩进宽度,本例子中提供了树与数组之间的转换函数,实际业务中请根据需求修改。

expand codeexpand code
加载中
NameAgeAddress
Edward King 032London, Park Lane no. 0
Edward King 132London, Park Lane no. 1
Edward King 232London, Park Lane no. 2
Edward King 332London, Park Lane no. 3
Edward King 432London, Park Lane no. 4
Edward King 532London, Park Lane no. 5
Edward King 632London, Park Lane no. 6
Edward King 732London, Park Lane no. 7
Edward King 832London, Park Lane no. 8
Edward King 932London, Park Lane no. 9
Edward King 1032London, Park Lane no. 10
Edward King 1132London, Park Lane no. 11
Edward King 1232London, Park Lane no. 12
Edward King 1332London, Park Lane no. 13
Edward King 1432London, Park Lane no. 14
Edward King 1532London, Park Lane no. 15
Edward King 1632London, Park Lane no. 16
Edward King 1732London, Park Lane no. 17
Edward King 1832London, Park Lane no. 18
Edward King 1932London, Park Lane no. 19
Edward King 2032London, Park Lane no. 20
Edward King 2132London, Park Lane no. 21
Edward King 2232London, Park Lane no. 22
Edward King 2332London, Park Lane no. 23
Edward King 2432London, Park Lane no. 24
Edward King 2532London, Park Lane no. 25
Edward King 2632London, Park Lane no. 26
Edward King 2732London, Park Lane no. 27
Edward King 2832London, Park Lane no. 28
Edward King 2932London, Park Lane no. 29
Edward King 3032London, Park Lane no. 30
Edward King 3132London, Park Lane no. 31
Edward King 3232London, Park Lane no. 32
Edward King 3332London, Park Lane no. 33
Edward King 3432London, Park Lane no. 34
Edward King 3532London, Park Lane no. 35
Edward King 3632London, Park Lane no. 36
Edward King 3732London, Park Lane no. 37
Edward King 3832London, Park Lane no. 38
Edward King 3932London, Park Lane no. 39
Edward King 4032London, Park Lane no. 40
Edward King 4132London, Park Lane no. 41
Edward King 4232London, Park Lane no. 42
Edward King 4332London, Park Lane no. 43
Edward King 4432London, Park Lane no. 44
Edward King 4532London, Park Lane no. 45
Edward King 4632London, Park Lane no. 46
Edward King 4732London, Park Lane no. 47
Edward King 4832London, Park Lane no. 48
Edward King 4932London, Park Lane no. 49

指定 [nzScroll]y 数值 方便一页内展示大量数据,每一列的宽度可以由 [nzWidth] 指定。

expand codeexpand code
加载中
Full NameAgeColumn 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Action
John Brown32New YorkNew YorkNew YorkNew YorkNew YorkNew YorkNew YorkNew Yorkaction
Jim Green40LondonLondonLondonLondonLondonLondonLondonLondonaction

对于列数很多的数据,可以使用 [nzLeft][nzRight] 固定前后的列,横向滚动查看其它数据,需要和 [nzScroll].x 配合使用。

列头与内容不对齐或出现列重复,请指定固定列的宽度 [nzWidth]。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。 建议指定 nzScroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 nzScroll.x。 注意:固定列通过 sticky 实现,IE 11 会降级成横向滚动。

expand codeexpand code
加载中
Full NameAgeColumn 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Action
Edward King 032LondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King 132LondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King 232LondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King 332LondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King 432LondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King 532LondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King 632LondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King 732LondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King 832LondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King 932LondonLondonLondonLondonLondonLondonLondonLondonaction

同时固定头和列,适合同时展示有大量数据和数据列。

列头与内容不对齐或出现列重复,请指定固定列的宽度 [nzWidth]。如果指定 width 不生效或出现白色垂直空隙,请尝试建议留一列不设宽度以适应弹性布局,或者检查是否有超长连续字段破坏布局。 建议指定 nzScroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 nzScroll.x。 注意:固定列通过 sticky 实现,IE 11 会降级成横向滚动。

expand codeexpand code
加载中
NameOtherCompanyGender
AgeAddressCompany AddressCompany Name
StreetBlock
BuildingDoor No.
John Brown1Lake ParkC2035Lake Street 42SoftLake CoM
John Brown2Lake ParkC2035Lake Street 42SoftLake CoM
John Brown3Lake ParkC2035Lake Street 42SoftLake CoM
John Brown4Lake ParkC2035Lake Street 42SoftLake CoM
John Brown5Lake ParkC2035Lake Street 42SoftLake CoM
John Brown6Lake ParkC2035Lake Street 42SoftLake CoM
John Brown7Lake ParkC2035Lake Street 42SoftLake CoM
John Brown8Lake ParkC2035Lake Street 42SoftLake CoM
John Brown9Lake ParkC2035Lake Street 42SoftLake CoM
John Brown10Lake ParkC2035Lake Street 42SoftLake CoM

固定列与分组表头联合使用。

expand codeexpand code
加载中


NameAgeAddressAction
Edward King 0
32London, Park Lane no. 0Delete
Edward King 1
32London, Park Lane no. 1Delete

定制带单元格编辑功能的表格,自由操作单元格内容。

为了获得更好的性能,NG-ZORRO 所有组件都运行在 OnPush 模式下,这意味着对 @Input() 数据的 mutate 将不会生效,请使用 immutable 方式操作数组或者对象。

开发者可以参照该例子根据自己需求自由定制表格的编辑功能。

expand codeexpand code
加载中
NameAgeAddressAction
Edrward 032London Park no. 0Edit
Edrward 132London Park no. 1Edit
Edrward 232London Park no. 2Edit
Edrward 332London Park no. 3Edit
Edrward 432London Park no. 4Edit
Edrward 532London Park no. 5Edit
Edrward 632London Park no. 6Edit
Edrward 732London Park no. 7Edit
Edrward 832London Park no. 8Edit
Edrward 932London Park no. 9Edit

定制带行编辑功能的表格,自由操作行内容。

为了获得更好的性能,NG-ZORRO 所有组件都运行在 OnPush 模式下,这意味着对 @Input() 数据的 mutate 将不会生效,请使用 immutable 方式操作数组或者对象。

开发者可以参照该例子根据自己需求自由定制表格的编辑功能。

expand codeexpand code
加载中
NamePlatformVersionUpgradedCreatorDateAction
ScreemiOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
ScreemiOS10.3.4.5654500Jack2014-12-24 23:12:00Publish
ScreemiOS10.3.4.5654500Jack2014-12-24 23:12:00Publish

展示每行数据更详细的信息。

expand codeexpand code
加载中


Full NameAgeIndexColumn 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Action

虚拟滚动,结合 cdk scrolling 的虚拟滚动,用于巨量数据加载。可以通过获得 cdkVirtualScrollViewport 进行进一步操作,见本示例及 API

expand codeexpand code
加载中
NameAgeAddress
John Brown32New York No. 1 Lake Park
Jim Green42London No. 1 Lake Park
Joe Black32Sidney No. 1 Lake Park

使用自定义元素,用户可以导入 @angular/cdk/drag-drop 来实现拖拽排序。

注意:需要手动导入 import {DragDropModule} from '@angular/cdk/drag-drop';

expand codeexpand code
加载中
CompanyContactCountry
Alfreds FutterkisteMaria AndersGermany
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly

模板模式,显示内容仅由模板内容控制,不再需要向 nzData 传入数据,完全像普通 table 一样使用,使用 ant-design 的样式。

expand codeexpand code
加载中
Full NameAgeColumn 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Action
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonaction

当有连续超长字符串时,可以使用 nzBreakWord 来折行显示

expand codeexpand code
加载中
Full NameAgeColumn 1Column 2Column ColumnColumn 3Column 4
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondon
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondon
Edward King32LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondon

设置 nzTableLayout="fixed"nzEllipsis 可以让单元格内容根据宽度自动省略。

列头缩略暂不支持和排序筛选一起使用。

expand codeexpand code
加载中
Here is Title
NameAgeAddressAction
John Brown12New York No. 1 Lake ParkDeleteMore action
John Brown22New York No. 2 Lake ParkDeleteMore action
John Brown32New York No. 3 Lake ParkDeleteMore action
John Brown42New York No. 4 Lake ParkDeleteMore action
John Brown52New York No. 5 Lake ParkDeleteMore action
John Brown62New York No. 6 Lake ParkDeleteMore action
John Brown72New York No. 7 Lake ParkDeleteMore action
John Brown82New York No. 8 Lake ParkDeleteMore action
John Brown92New York No. 9 Lake ParkDeleteMore action
John Brown102New York No. 10 Lake ParkDeleteMore action
Here is Footer

选择不同配置组合查看效果。

expand codeexpand code
加载中
NameGenderAgeAddressAction
John Brownfemale32New York No. 1 Lake ParkActionDelete
Jim Greenfemale42London No. 1 Lake ParkActionDelete
Joe Blackmale32Sidney No. 1 Lake ParkActionDelete

控制表格中列的展示与排序

expand codeexpand code
加载中

API#

nz-table#

参数说明类型默认值全局配置
[nzData]数据数组T[]-
[nzFrontPagination]是否在前端对数据进行分页,如果在服务器分页数据或者需要在前端显示全部数据时传入 falsebooleantrue
[nzTotal]当前总数据,在服务器渲染时需要传入number-
[nzCustomColumn]控制表格列的展示与排序,(开启后 nzWidthConfigth[nzWidth] 将不生效)NzCustomColumn[]-
[nzPageIndex]当前页码,可双向绑定number-
[nzPageSize]每页展示多少数据,可双向绑定number-
[nzShowPagination]是否显示分页器booleantrue
[nzPaginationPosition]指定分页显示的位置'top' | 'bottom' | 'both'bottom
[nzPaginationType]指定分页显示的尺寸'default' | 'small'default
[nzBordered]是否展示外边框和列边框booleanfalse
[nzOuterBordered]是否显示外边框booleanfalse-
[nzWidthConfig]表头分组时指定每列宽度,与 th[nzWidth] 不可混用string[][]
[nzSize]正常或迷你类型'middle' | 'small' | 'default''default'
[nzLoading]页面是否加载中booleanfalse
[nzLoadingIndicator]加载指示符TemplateRef<void>-
[nzLoadingDelay]延迟显示加载效果的时间(防止闪烁)number0
[nzScroll]横向或纵向支持滚动,也可用于指定滚动区域的宽高度:{ x: "300px", y: "300px" }object-
[nzTitle]表格标题string | TemplateRef<void>-
[nzFooter]表格尾部string | TemplateRef<void>-
[nzNoResult]无数据时显示内容string | TemplateRef<void>-
[nzPageSizeOptions]页数选择器可选值number[][ 10, 20, 30, 40, 50 ]
[nzShowQuickJumper]是否可以快速跳转至某页booleanfalse
[nzShowSizeChanger]是否可以改变 nzPageSizebooleanfalse
[nzShowTotal]用于显示数据总量和当前数据范围,用法参照 Pagination 组件TemplateRef<{ $implicit: number, range: [ number, number ] }>-
[nzItemRender]用于自定义页码的结构,用法参照 Pagination 组件TemplateRef<{ $implicit: 'page' | 'prev' | 'next', page: number }>-
[nzHideOnSinglePage]只有一页时是否隐藏分页器booleanfalse
[nzSimple]当添加该属性时,显示为简单分页boolean-
[nzTemplateMode]模板模式,无需将数据传递给 nzDatabooleanfalse
[nzVirtualItemSize]虚拟滚动时每一列的高度,与 cdk itemSize 相同number0
[nzVirtualMaxBufferPx]缓冲区最大像素高度,与 cdk maxBufferPx 相同number200
[nzVirtualMinBufferPx]缓冲区最小像素高度,低于该值时将加载新结构,与 cdk minBufferPx 相同number100
[nzVirtualForTrackBy]虚拟滚动数据 TrackByFunction 函数TrackByFunction<T>-
(nzPageIndexChange)当前页码改变时的回调函数EventEmitter<number>-
(nzPageSizeChange)页数改变时的回调函数EventEmitter<number>-
(nzCurrentPageDataChange)当前页面展示数据改变的回调函数EventEmitter<T[]>-
(nzCustomColumnChange)当表格重新排序后的回调EventEmitter<NzCustomColumn[]>-
(nzQueryParams)当服务端分页、筛选、排序时,用于获得参数,具体见示例EventEmitter<NzTableQueryParams>-

th#

勾选属性

参数说明类型默认值
[nzShowCheckbox]是否添加 checkboxboolean-
[nzDisabled]checkbox 是否禁用boolean-
[nzIndeterminate]checkbox indeterminate 状态boolean-
[nzLabel]checkbox 的可访问性标签string-
[nzChecked]checkbox 是否被选中,可双向绑定boolean-
(nzCheckedChange)选中的回调EventEmitter<boolean>-

下拉选择属性

参数说明类型默认值
[nzShowRowSelection]是否显示下拉选择boolean-
[nzSelections]下拉选择的内容 text 及回调函数 onSelectArray<{ text: string, onSelect: any }>-

排序属性

参数说明类型默认值
[nzShowSort]是否显示排序boolean-
[nzSortFn]排序函数,前端排序使用一个函数(参考 Array.sort 的 compareFunction),服务端排序时传入 trueNzTableSortFn<T> | boolean-
[nzSortDirections]支持的排序方式,取值为 'ascend', 'descend', nullArray<'ascend' | 'descend' | null>['ascend', 'descend', null]
[nzSortOrder]当前排序状态,可双向绑定'descend''ascend'
(nzSortOrderChange)排序状态改变回调EventEmitter<'descend' | 'ascend' | null>-

过滤属性

参数说明类型默认值
[nzShowFilter]是否显示过滤boolean-
[nzFilterFn]前端排序时,确定筛选的运行函数,服务端排序时,传入 trueNzTableFilterFn<T> | boolean-
[nzFilters]过滤器内容, 显示数据 text,回调函数传出 value,设置 byDefault 以默认应用过滤规则Array<{ text: string; value: any; byDefault?: boolean }>-
[nzFilterMultiple]是否为多选过滤器booleantrue
(nzFilterChange)过滤器内容选择的 value 数据回调EventEmitter<any[] | any>-

样式属性

参数说明类型默认值
[nzWidth]指定该列宽度,表头未分组时可用string-
[nzLeft]左侧距离,用于固定左侧列,当为 true 时自动计算,为 false 时停止固定string | booleanfalse
[nzRight]右侧距离,用于固定右侧列,当为 true 时自动计算,为 false 时停止固定string | booleanfalse
[nzAlign]设置列内容的对齐方式'left' | 'right' | 'center'-
[nzCellControl]设置列的位置,该值为 NzCustomColumn 类型中 value 字段的值string-
[nzBreakWord]是否折行显示booleanfalse
[nzEllipsis]超过宽度将自动省略,暂不支持和排序筛选一起使用。仅当表格布局将为 nzTableLayout="fixed"时可用booleanfalse
[colSpan]每单元格中扩展列的数量numbernull
[rowSpan]每单元格中扩展行的数量numbernull

其他

参数说明类型默认值
[nzColumnKey]当前列的 key,用于服务端筛选和排序使用string-

td#

勾选属性

参数说明类型默认值
[nzShowCheckbox]是否添加 checkboxboolean-
[nzDisabled]checkbox 是否禁用boolean-
[nzIndeterminate]checkbox indeterminate 状态boolean-
[nzLabel]checkbox 的可访问性标签string-
[nzChecked]checkbox 是否被选中,可双向绑定boolean-
(nzCheckedChange)选中的回调EventEmitter<boolean>-
[colSpan]单元格可横跨的列数numbernull
[rowSpan]单元格可横跨的行数numbernull

展开属性

参数说明类型默认值
[nzShowExpand]是否显示展开按钮boolean-
[nzExpand]当前展开按钮状态,可双向绑定boolean-
[nzExpandIcon]自定义展开图标TemplateRef<void>-
(nzExpandChange)当前展开按钮状态改变回调函数EventEmitter<boolean>-

样式属性

参数说明类型默认值
[nzLeft]左侧距离,用于固定左侧列,当为 true 时自动计算,为 false 时停止固定string | booleanfalse
[nzRight]右侧距离,用于固定右侧列,当为 true 时自动计算,为 false 时停止固定string | booleanfalse
[nzAlign]设置列内容的对齐方式'left' | 'right' | 'center'-
[nzCellControl]设置列的位置,该值为 NzCustomColumn 类型中 value 字段的值string-
[nzBreakWord]是否折行显示booleanfalse
[nzEllipsis]超过宽度将自动省略,暂不支持和排序筛选一起使用。仅当表格布局将为 nzTableLayout="fixed"时可用booleanfalse

其他

参数说明类型默认值
[nzIndentSize]展示树形数据时,每层缩进的宽度,以 px 为单位number-

tr#

参数说明类型默认值
[nzExpand]当前列是否展开,与 td 上的 nzExpand 属性配合使用boolean-

nz-filter-trigger#

用于自定义筛选功能

参数说明类型默认值
[nzDropdownMenu]Dropdown 下拉菜单组件NzDropdownMenuComponent-
[nzVisible]菜单是否显示,可双向绑定boolean-
[nzActive]是否激活选中图标效果booleanfalse
[nzHasBackdrop]是否附带背景板booleanfalse
(nzVisibleChange)菜单显示状态改变时调用,参数为 nzVisibleEventEmitter<boolean>-

[nz-virtual-scroll]#

虚拟滚动时配合 ng-template 使用, 格式为: TemplateRef<{ $implicit: T, index: number }>.

注意#

为了获得更好的性能,NG-ZORRO 所有组件都运行在 OnPush 模式下,这意味着对 @Input() 数据的 mutate 将不会生效,请使用 immutable 方式操作数组或者对象。

// 增加数据
this.dataSet = [
  ...this.dataSet,
  {
    key: `${this.i}`,
    name: `Edward King ${this.i}`,
    age: '32',
    address: `London, Park Lane no. ${this.i}`
  }
];
// 删除数据
this.dataSet = this.dataSet.filter(d => d.key !== i);

开发者也可以使用 immer 获得更好的操作体验