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>

全局空态配置

Empty 会读取 ConfigProvider 的 empty 插槽，回调参数 component 标明请求来源（empty / select / table / dropdown），便于按组件区分空态。

empty 暂无内容

<template>
  <x-config-provider>
    <template #empty="{ component }">
      <x-empty :description="`${component} 暂无内容`" />
    </template>
    <x-empty />
    <x-select v-model="value" allow-search placeholder="搜索成员" />
  </x-config-provider>
</template>

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

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

调用方显式传了 description、imgSrc、image 或默认插槽时以自身配置为准，empty 插槽只接管「裸空态」——否则组件上配置的内容会被全局配置静默覆盖。

按需导入

import { Empty } from 'x-next';

样式按需引入（base.css 为共享基础层，多个组件只需引入一次）：

import 'x-next/style/base.css';
import 'x-next/style/empty.css';

Props

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

Slots

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

已知限制

• 默认插画是多色美术资源，四层灰阶走 --x-empty-illustration-* token，会随亮/暗主题自动换色；它是定稿的图形，不支持通过 --x-empty-image-color 改色。需要自定义图形时请用 imgSrc 或 image 插槽。
• empty 插槽只接管「裸空态」。调用方传了 description、imgSrc、默认插槽或 image 插槽时，以调用方配置为准，不再读取全局配置。