Empty 空状态

当数据为空时的占位展示，内置精美插图，支持自定义描述和底部操作。

基础用法

暂无数据

使用内置插图和默认描述文字

vue

<script setup lang="ts">
import { AEmpty } from '@lite-code/aui-vue'
</script>

<template>
  <AEmpty />
</template>

自定义描述

暂时没有数据，请稍后再试

通过 description prop 自定义描述文字

vue

<script setup lang="ts">
import { AEmpty } from '@lite-code/aui-vue'
</script>

<template>
  <AEmpty description="暂时没有数据，请稍后再试" />
</template>

带操作按钮

暂无数据

default slot 中放置操作按钮

vue

<script setup lang="ts">
import { AEmpty, AButton } from '@lite-code/aui-vue'
</script>

<template>
  <AEmpty description="暂无数据">
    <AButton>立即创建</AButton>
  </AEmpty>
</template>

API

Props

属性	类型	默认值	说明
description	string | null	'暂无数据'	描述文字，传 null 隐藏
imageStyle	object	—	图片区域自定义样式
className	string	—	自定义 class
style	object	—	自定义样式

Slots

插槽	说明
default	底部操作区（如按钮）
image	自定义插图，替换内置 SVG
description	自定义描述内容
no-image	声明此插槽则隐藏插图区域