Skip to content

Empty 空状态

空状态用于页面、列表、表格、搜索结果没有内容时的提示。VISTA B 使用 HomeVistaEmpty,图片换成 HOMEVISTA 缺省图,文案要说明当前为空的原因,并给出下一步操作。

基础用法

标题写一句短提示。没有特别原因时,不要写太长。

暂无项目数据

暂无项目数据

vue
<HomeVistaEmpty title="暂无项目数据" />

自定义图片尺寸

image-size 控制缺省图大小。常规内容区建议使用 120180,整页空状态可以更大。

暂无搜索结果

暂无搜索结果

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 | accountUpgradelist
title主文案string暂无数据
description副文案string
image-size图片尺寸number280

Empty 插槽

插槽说明
default底部操作区

HOMEVISTA 设计规范