展示行列数据。
当有大量结构化的数据需要展现时;
当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
简单的表格,最后一列是各种操作。
对年龄进行排序
第一列是联动的选择框。
选择后进行操作,完成后清空选择。
配置选择框的默认属性。
数据项较多时显示分页。
这个例子通过简单的 ajax 读取方式,演示了如何从服务端读取并展现数据,具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。
注意,此示例使用 模拟接口 ,展示数据可能不准确,请打开网络面板查看请求。
传入 nzIsPagination 为 false 即可。此时表格将完整显示 nzDataSource 内的数据,不进行任何分页。
选择不同配置组合查看效果。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
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 |
嵌入th中显示排序状态
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzValue | 当前排序状态,可双向绑定 | 'ascend'|'descend'|null | null |
nzValueChange | 当前排序状态改变回调 | Func | - |
标定thead
标定th
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzCheckbox | 是否有checkbox出现在当前th上 | Boolean | false |
标定tbody
标定tbody中tr
标定td
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzCheckbox | 是否有checkbox出现在当前td上 | Boolean | false |
用于td中分隔数据