Empty空状态

空状态时的展示占位图。

何时使用#

当目前没有数据时，用于显式的用户提示。

import { NzEmptyModule } from 'ng-zorro-antd/empty';

代码演示

暂无数据

基本

简单的展示。

expand codeexpand code
      加载中

暂无数据

选择图片

可以通过设置 nzNotFoundImage 为 simple 选择另一种风格的图片。

expand codeexpand code
      加载中
empty

Customize Description

自定义

自定义图片、描述、附属内容。

expand codeexpand code
      加载中

Select

TreeSelect

Cascader

请选择

Transfer

0 项

暂无数据

0 项

暂无数据

Table

TitleAge

暂无数据

List

暂无数据

全局化配置

自定义全局组件的 Empty 样式。

expand codeexpand code
      加载中
无描述

无描述展示。

expand codeexpand code
      加载中

API#

nz-empty#

参数说明类型默认值
[nzNotFoundImage]设置显示图片，为 string 时表示自定义图片地址string | TemplateRef<void>-
[nzNotFoundContent]自定义描述内容string | TemplateRef<void> | null-
[nzNotFoundFooter]设置自定义 footerstring | TemplateRef<void>-

NZ_CONFIG#

nzEmpty 接口有如下字段：

参数说明类型
nzDefaultEmptyContent用户自定义的全局空组件，可通过 undefined 来取消自定义的全局空组件Type<any>|TemplateRef<string>|string|undefined

InjectionToken#

Token说明参数
NZ_EMPTY_COMPONENT_NAME将会被注入到用户的全局自定义空组件中，告诉该组件其所在组件的名称string

全局自定义空组件#

你或许知道或者用过一些类似 nzNotFoundContent 的属性来自定义组件数据为空时的内容，现在它们都会使用 Empty 组件。你可以通过在 NZ_CONFIG 中提供 { empty: { nzDefaultEmptyContent: something } } 来定义一个自定义的全局空组件。