展示行列数据。
当有大量结构化的数据需要展现时;
当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
简单的表格,最后一列是各种操作。
第一列是联动的选择框。
选择后进行操作,完成后清空选择。
配置选择框的默认属性。
使用受控属性对筛选和排序状态进行控制。
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 | 表格内容滚动,可用于指定滚动区域的宽度与高度:{{'{'}} 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 |
嵌入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 |