Empty空状态

空状态时的展示占位图。

何时使用#

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

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

代码演示

暂无数据

简单的展示。

expand codeexpand code
      加载中
    

暂无数据

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

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 } } 来定义一个自定义的全局空组件。