Empty 空状态

空状态时的展示占位图。

代码演示

基础用法

No data

<template>
  <a-empty />
</template>

选择图片

可以通过设置 image 为 Empty.PRESENTED_IMAGE_SIMPLE 选择另一种风格的图片。

No data

<template>
  <a-empty :image="simpleImage" />
</template>
<script setup>
import { Empty } from 'ant-design-vue';
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
</script>

自定义

自定义图片、描述、附属内容。

Customize Description

<template>
  <a-empty
    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
    :image-style="{
      height: '60px',
    }"
  >
    <template #description>
      <span>
        Customize
        <a href="#api">Description</a>
      </span>
    </template>
    <a-button type="primary">Create Now</a-button>
  </a-empty>
</template>

全局化配置

自定义全局组件的 Empty 样式。

Select

TreeSelect

Cascader

Transfer

0 item

No data

0 item

No data

Table

Name	Age
No data

List

No data

<template>
  <a-switch
    v-model:checked="customize"
    un-checked-children="default"
    checked-children="customize"
  />
  <a-divider />
  <a-config-provider>
    <template v-if="customize" #renderEmpty>
      <div style="text-align: center">
        <p>Data Not Found</p>
      </div>
    </template>
    <div class="config-provider">
      <h3>Select</h3>
      <a-select :style="style" :options="[]" />

      <h3>TreeSelect</h3>
      <a-tree-select :style="style" :tree-data="[]" />

      <h3>Cascader</h3>
      <a-cascader :style="style" :options="[]" :show-search="true" />

      <h3>Transfer</h3>
      <a-transfer :data-source="[]" />

      <h3>Table</h3>
      <a-table style="margin-top: 8px" :columns="columns" :data-source="[]" />
      <h3>List</h3>
      <a-list :data-source="[]" />
    </div>
  </a-config-provider>
</template>
<script setup>
import { ref } from 'vue';
const customize = ref(false);
const style = {
  width: '200px',
};
const columns = [
  {
    title: 'Name',
  },
  {
    title: 'Age',
  },
];
</script>
<style scoped>
.code-box-demo .config-provider h3 {
  font-size: inherit;
  margin: 16px 0 8px 0;
}
</style>

无描述

无描述展示。

<template>
  <a-empty :description="null" />
</template>

API

参数	说明	类型	默认值
description	自定义描述内容	string | v-slot	-
image	设置显示图片，为 string 时表示自定义图片地址	string | v-slot	false
imageStyle	图片样式	CSSProperties	-

内置图片

Empty.PRESENTED_IMAGE_SIMPLE

Empty.PRESENTED_IMAGE_DEFAULT