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.