Skip to content

Empty 空状态 ​

数据缺失或还没创建时的占位提示。

何时使用 ​

  • 列表 / 表格当前没有任何数据。
  • 详情页对应资源未创建("创建第一个项目")。
  • 搜索、筛选后无结果。

基本使用 ​

完全无参时显示默认插画 + 中文 "暂无数据"。

自定义文案 ​

通过 description 改文案,让空态更贴合业务语义。

配合操作按钮 ​

默认插槽放在描述下方,常用于"立即创建 / 重新搜索"等引导操作。

使用图片 URL ​

image 接受图片地址,替换默认插画。

调整图片尺寸 ​

image-style 接受任意 CSSProperties 对象,常用来缩放或限高。

自定义插画 ​

#image slot 可塞入任意 VNode(SVG / 图标组件)实现完全自定义。

列表卡片内嵌 ​

把 Empty 直接塞进 Card / 自定义边框容器里,配「立即创建」按钮做引导转化。

搜索无结果 ​

搜索 / 筛选场景下空态附带「清除筛选」按钮,是一键重置的常用范式。

复杂描述(description slot) ​

需要在描述里放链接 / 多行 / 富文本时改用 #description slot,description prop 主要面向单行短文案。

三种尺寸 ​

imageStyle.height 控制插图尺寸:32 适合表格内嵌、80 默认、120 用于专门的空页面。

Tabs 内嵌空态 ​

不同 tab 下视为独立空状态:选中后展示对应文案,方便业务定位「具体哪个维度没数据」。

API ​

Props ​

参数类型默认值说明
descriptionstring'暂无数据'描述文案
imagestring''自定义图片 URL
imageStyleCSSProperties{}图片元素样式

Slots ​

名称说明
default描述下方的额外内容
description自定义描述(覆盖 description 属性)
image自定义插画

Released under the MIT License.