Table 表格

展示行列数据。

何时使用

  • 当有大量结构化的数据需要展现时;

  • 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

代码演示

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

对年龄进行排序

第一列是联动的选择框。

选择后进行操作,完成后清空选择。

配置选择框的默认属性。

数据项较多时显示分页。

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

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

传入 nzIsPagination 为 false 即可。此时表格将完整显示 nzDataSource 内的数据,不进行任何分页。

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

API

nz-table

参数 说明 类型 默认值
nzAjaxData 远程异步数据,与nzDataSource二选一 Array []
nzDataSource 同步数据,与nzAjaxData二选一 Array []
nzDataChange 当前分页数据回调,返回当前分页数据的内容 Func -
#模板引用变量 模板引用变量可以自由命名,经过分页之后的数据可以通过模板引用变量.data获取,最后通过*ngFor的方式渲染在table中,关于模板引用变量的知识可以参考这里 NzTableComponent -
nzTotal 数据总量,用于与nzAjaxData共同使用 Number -
nzPageIndex 当前页码,可双向绑定 Number -
nzPageIndexChange 当前页码变化回调 Func -
nzPageSize 每页数量,可双向绑定 Number -
nzPageSizeChange 每页数量变化回调 Func -
nzPageIndexChangeClick 用户点击页码事件回调 Func -
nzBordered 是否显示边框 Boolean false
nzSize table大小 'small'|'middle'|'default' 'default'
nzCustomNoResult 是否自定义无数据时内容 Boolean false
[noResult] 无数据时内容 ng-content -
nzShowFooter 是否显示表脚 Boolean false
[nz-table-footer] 表脚内容 ng-content -
nzShowTitle 是否显示表头 Boolean false
[nz-table-table] 表头内容 ng-content -
nzIsPagination 是否分页 Boolean true
nzLoading 是否显示加载中 Boolean false
nzShowSizeChanger 是否显示pagination中改变页数 Boolean false
nzShowQuickJumper 是否显示pagination中快速跳转 Boolean false
nzShowTotal 是否显示总数据量 Boolean false

nz-table-sort

嵌入th中显示排序状态

参数 说明 类型 默认值
nzValue 当前排序状态,可双向绑定 'ascend'|'descend'|null null
nzValueChange 当前排序状态改变回调 Func -

[nz-thead]

标定thead

[nz-th]

标定th

参数 说明 类型 默认值
nzCheckbox 是否有checkbox出现在当前th上 Boolean false

[nz-table-body]

标定tbody

[nz-tbody-tr]

标定tbody中tr

[nz-td]

标定td

参数 说明 类型 默认值
nzCheckbox 是否有checkbox出现在当前td上 Boolean false

[nz-table-divider]

用于td中分隔数据