Table 表格

展示行列数据。

何时使用

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

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

代码演示

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

第一列是联动的选择框。

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

配置选择框的默认属性。

使用受控属性对筛选和排序状态进行控制。

nzTable可以像 HTML table 标签 一样自定义表头和内容,通过配合 nz-table-sortnz-table-filter可以方便的自定义筛选和排序功能。

通过 nz-dropdownnz-dropdown-custom属性自定义筛选菜单

nzTable可以像 HTML table 标签 一样自定义表头和内容。

数据项较多时显示分页。

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

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

当表格内容较多不能一次性完全展示时。

nzTable可以像 HTML table 标签 一样使用 rowspancolspan标签

表格支持树形数据的展示,可以通过设置 nzLevel 以控制每一层的缩进宽度。

方便一页内展示大量数据。

需要手动指定 thtd的宽度,否则列头和内容可能不对齐。

通过自定义模板实现带行编辑功能的表格。

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

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

API

nz-table

参数 说明 类型 默认值
nzAjaxData 远程异步数据,与nzDataSource二选一 Array []
nzDataSource 同步数据,与nzAjaxData二选一 Array []
nzDataChange 当前分页数据回调,返回当前分页数据的内容 Func -
#模板引用变量 模板引用变量可以自由命名,经过分页之后的数据可以通过模板引用变量.data获取,最后通过*ngFor的方式渲染在table中,关于模板引用变量的知识可以参考 这里 NzTableComponent -
nzScroll 表格内容滚动,可用于指定滚动区域的宽度与高度:{{'{'}} x: 1024, y: 300{{'}' }} Object -
#nzFixedHeader 用于定位固定表头,与 nzScroll配合使用 ng-template -
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-title] 表头内容 ng-content -
nzIsPagination 是否分页 Boolean true
nzLoading 是否显示加载中 Boolean false
nzShowSizeChanger 是否显示pagination中改变页数 Boolean false
nzPageSizeSelectorValues pagination中每页显示条目数下拉框值 Array [10, 20, 30, 40, 50]
nzShowQuickJumper 是否显示pagination中快速跳转 Boolean false
nzShowTotal 是否显示总数据量 Boolean false
nzIsPageIndexReset 数据变更后是否保留在数据变更前的页码 Boolean true

nz-table-sort

嵌入th中显示排序状态

nz-table-filter

与nz-dropdown结合使用,用于过滤表中的数据

参数 说明 类型
[nz-table-filter-confirm] 确定按钮的内容 ng-content
[nz-table-filter-clear] 重置按钮的内容 ng-content

[nz-thead]

标定thead

[nz-th]

标定th

参数 说明 类型 默认值
nzCheckbox 是否有checkbox出现在当前th上 Boolean false
nzExpand 是否是展开按钮列 Boolean false
nzWidth 当前列的宽度,暂时不支持合并列宽度 String -

[nz-table-body]

标定tbody

[nz-tbody-tr]

标定tbody中tr

[nz-td]

标定td

参数 说明 类型 默认值
nzCheckbox 是否有checkbox出现在当前td上 Boolean false
nzExpand 是否是展开按钮列 Boolean false

[nz-table-divider]

用于td中分隔数据

nz-row-indent

与树形数据展示配合使用

参数 说明 类型 默认值
nzIndentSize 控制每一层的缩进宽度 Number -

nz-row-expand-icon

与可展开和树形数据展示配合使用

参数 说明 类型 默认值
nzExpand 标识是否展开,可双向绑定 Boolean false
nzShowExpand 是否显示此 展开/收缩 按钮 Boolean true