展示行列数据。
当有大量结构化的数据需要展现时;
当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
简单的表格,最后一列是各种操作。
第一列是联动的选择框。
选择后进行操作,完成后清空选择。
配置选择框的默认属性。
使用受控属性对筛选和排序状态进行控制。
nzTable可以像
HTML table 标签
一样自定义表头和内容,通过配合 nz-table-sort
与 nz-table-filter
可以方便的自定义筛选和排序功能。
通过 nz-dropdown
的 nz-dropdown-custom
属性自定义筛选菜单
nzTable可以像 HTML table 标签 一样自定义表头和内容。
数据项较多时显示分页。
这个例子通过简单的 ajax 读取方式,演示了如何从服务端读取并展现数据,具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。
注意,此示例使用 模拟接口 ,展示数据可能不准确,请打开网络面板查看请求。
当表格内容较多不能一次性完全展示时。
nzTable可以像
HTML table 标签
一样使用 rowspan
和 colspan
标签
表格支持树形数据的展示,可以通过设置 nzLevel
以控制每一层的缩进宽度。
方便一页内展示大量数据。
需要手动指定 th
和 td
的宽度,否则列头和内容可能不对齐。
通过自定义模板实现带行编辑功能的表格。
传入 nzIsPagination 为 false 即可。此时表格将完整显示 nzDataSource 内的数据,不进行任何分页。
选择不同配置组合查看效果。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzAjaxData | 远程异步数据,与nzDataSource二选一 | Array | [] |
nzDataSource | 同步数据,与nzAjaxData二选一 | Array | [] |
nzDataChange | 当前分页数据回调,返回当前分页数据的内容 | Func | - |
#模板引用变量 | 模板引用变量可以自由命名,经过分页之后的数据可以通过模板引用变量.data 获取,最后通过*ngFor的方式渲染在table中,关于模板引用变量的知识可以参考
这里
|
NzTableComponent | - |
nzScroll | 纵向支持滚动,也可用于指定滚动区域的高度:{{ '{' }} 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 |
nzShowQuickJumper | 是否显示pagination中快速跳转 | Boolean | false |
nzShowTotal | 是否显示总数据量 | Boolean | false |
nzIsPageIndexReset | 数据变更后是否保留在数据变更前的页码 | Boolean | true |
嵌入th中显示排序状态
与nz-dropdown结合使用,用于过滤表中的数据
参数 | 说明 | 类型 |
---|---|---|
[nz-table-filter-confirm] | 确定按钮的内容 | ng-content |
[nz-table-filter-clear] | 重置按钮的内容 | ng-content |
标定thead
标定th
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzCheckbox | 是否有checkbox出现在当前th上 | Boolean | false |
nzExpand | 是否是展开按钮列 | Boolean | false |
nzWidth | 当前列的宽度,暂时不支持合并列宽度 | String | - |
标定tbody
标定tbody中tr
标定td
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzCheckbox | 是否有checkbox出现在当前td上 | Boolean | false |
nzExpand | 是否是展开按钮列 | Boolean | false |
用于td中分隔数据
与树形数据展示配合使用
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzIndentSize | 控制每一层的缩进宽度 | Number | - |
与可展开和树形数据展示配合使用
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzExpand | 标识是否展开,可双向绑定 | Boolean | false |
nzShowExpand | 是否显示此 展开/收缩 按钮 | Boolean | true |