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
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| description | string | '暂无数据' | 描述文案 |
| image | string | '' | 自定义图片 URL |
| imageStyle | CSSProperties | {} | 图片元素样式 |
Slots
| 名称 | 说明 |
|---|---|
| default | 描述下方的额外内容 |
| description | 自定义描述(覆盖 description 属性) |
| image | 自定义插画 |