ui-empty 空状态组

版本：v2.3.11

空状态组件用于展示空数据或无结果的状态，支持自定义图标、文字和操作按钮

基本使用

<template>
  <div class="empty-demo">
    <ui-empty description="暂无数据" />
  </div>
</template>

<style scoped>
.empty-demo {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
</style>

Props

参数	类型	默认值	说明
image	String	-	自定义空状态图标图片地址
description	String	'暂无数据'	空状态描述文
imageSize	Number	120	图标大小，单位：px

Slots

名称	说明
default	自定义空状态内容，覆盖默认值的图标和文字
image	自定义图标区
description	自定义描述文
action	自定义操作按钮区

示例

带自定义操作按钮的空状

<template>
  <div class="empty-demo">
    <ui-empty description="暂无数据">
      <template #action>
        <ui-button type="primary">刷新数据</ui-button>
      </template>
    </ui-empty>
  </div>
</template>

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/base/empty/empty