Empty 空状态
空状态用于页面、列表、表格、搜索结果没有内容时的提示。VISTA B 使用 HomeVistaEmpty,图片换成 HOMEVISTA 缺省图,文案要说明当前为空的原因,并给出下一步操作。
基础用法
标题写一句短提示。没有特别原因时,不要写太长。
vue
<HomeVistaEmpty title="暂无项目数据" />自定义图片尺寸
用 image-size 控制缺省图大小。常规内容区建议使用 120 到 180,整页空状态可以更大。
vue
<HomeVistaEmpty type="search" title="暂无搜索结果" :image-size="140" />缺省图库
下面按原素材文件展示,使用时按页面情况选择对应图片。
带操作按钮
空状态需要让用户继续做事时,在默认插槽里放按钮。
vue
<HomeVistaEmpty title="还没有创建客户">
<el-button type="primary">新建客户</el-button>
</HomeVistaEmpty>常见文案
| 场景 | 推荐写法 |
|---|---|
| 列表为空 | 暂无项目数据 |
| 搜索为空 | 没有找到匹配结果 |
| 没有权限 | 暂无访问权限 |
| 网络异常 | 数据加载失败,请重试 |
API
Empty 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 图片类型 | list | search | image | permission | network | notFound | maintenance | location | systemUpdate | security | accountUpgrade | list |
title | 主文案 | string | 暂无数据 |
description | 副文案 | string | 空 |
image-size | 图片尺寸 | number | 280 |
Empty 插槽
| 插槽 | 说明 |
|---|---|
default | 底部操作区 |












