Empty 空状态

用于无数据、搜索无结果或空白占位状态。

何时使用

• 列表、表格、选择器等数据容器没有可展示内容时。
• 搜索、筛选或加载后没有匹配结果时。
• 需要用轻量占位提示用户当前区域为空时。

基础用法

暂无数据

暂无数据

<template>
  <x-empty />
  <x-empty description="暂无数据" />
</template>

无描述

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

自定义图片

暂无组件

<template>
  <x-empty :img-src="emptyImageSrc">暂无组件</x-empty>
</template>

<script setup lang="ts">
const emptyImageSrc =
  'data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="96" height="72" viewBox="0 0 96 72"%3E%3Crect x="12" y="10" width="72" height="52" rx="10" fill="%23f8fafc" stroke="%23cbd5e1" stroke-width="2"/%3E%3Cpath d="M30 31h36M30 42h24" stroke="%2394a3b8" stroke-width="6" stroke-linecap="round"/%3E%3C/svg%3E';
</script>

自定义 image 插槽

暂无组件

<template>
  <x-empty>
    <template #image>
      <span class="empty-image" aria-hidden="true">
        <span class="empty-image-line"></span>
        <span class="empty-image-line is-short"></span>
      </span>
    </template>
    暂无组件
  </x-empty>
</template>

<style scoped>
.empty-image {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  width: 72px;
  height: 56px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
}

.empty-image-line {
  width: 100%;
  height: 6px;
  background: #cbd5e1;
  border-radius: 999px;
}

.empty-image-line + .empty-image-line {
  margin-top: 8px;
}

.empty-image-line.is-short {
  width: 62%;
}
</style>

自定义图标

?

没有找到匹配结果

<template>
  <x-empty description="没有找到匹配结果">
    <template #image>
      <span class="empty-icon">?</span>
    </template>
  </x-empty>
</template>

<style scoped>
.empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #2563eb;
  font-size: 24px;
  font-weight: 600;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 50%;
}
</style>

自定义描述

当前筛选条件下没有数据，尝试放宽时间范围。

<template>
  <x-empty>
    <span>当前筛选条件下没有数据，尝试放宽时间范围。</span>
  </x-empty>
</template>

组合空态

打开下拉框可查看 Select 的空状态插槽。

<template>
  <x-select v-model="value" allow-search placeholder="搜索成员">
    <template #empty>
      <x-empty description="没有匹配成员">
        <template #image>
          <span class="empty-small-icon">0</span>
        </template>
      </x-empty>
    </template>
  </x-select>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

<style scoped>
.empty-small-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #64748b;
  font-size: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
}
</style>

按需导入

import { Empty } from 'x-next';

Props

参数	说明	类型	默认值
description	描述内容；传入 null 或空字符串时隐藏描述区域	string | null	'暂无数据'
imgSrc	自定义图片地址	string	-

Slots

插槽名	说明
default	自定义描述内容
image	自定义图片或图标

已知限制

• 当前组件未接入全局 ConfigProvider 空态配置；如需在 Select、Table、Dropdown 等组件中定制空态，请使用对应组件的 empty 插槽。