Empty

Компонент Empty в библиотеке Element Plus используется для отображения состояния отсутствия данных. Он применяется в интерфейсах, где пользователь ожидает увидеть содержимое — например список, таблицу, результаты поиска или карточки товаров — но данные по каким-либо причинам отсутствуют.

Основная задача компонента — визуально и семантически сообщить пользователю, что контент отсутствует, а также при необходимости предложить дальнейшие действия.

Типичные сценарии использования:

пустые таблицы
отсутствие результатов поиска
пустые списки
начальное состояние страницы
ошибки загрузки данных
фильтрация без совпадений

Компонент обеспечивает единообразное отображение подобных состояний в интерфейсе и поддерживает кастомизацию текста, изображения и дополнительных элементов.

Базовое использование

Минимальный пример использования компонента:

<template>
  <el-empty description="Нет данных" />
</template>

В данном случае отображается стандартная иллюстрация Element Plus и текстовое описание.

Компонент автоматически центрируется внутри контейнера и отображает:

изображение
описание
опциональную область дополнительных действий

Структура компонента

Компонент Empty состоит из трёх основных частей:

Часть	Назначение
Image	Иллюстрация пустого состояния
Description	Текстовое описание
Footer	Дополнительные действия

Структура в DOM выглядит следующим образом:

<div class="el-empty">
  <div class="el-empty__image"></div>
  <div class="el-empty__description"></div>
  <div class="el-empty__bottom"></div>
</div>

Каждая из частей может быть переопределена через слоты.

Свойства компонента

description

Определяет текст описания пустого состояния.

Тип: string

<el-empty description="Список пуст" />

Если свойство не задано, используется стандартный текст.

image

Позволяет указать собственное изображение вместо стандартной иллюстрации.

Тип: string

<el-empty
  image="https://example.com/empty.svg"
  description="Ничего не найдено"
/>

Обычно используются SVG-иллюстрации.

image-size

Позволяет задать размер изображения.

Тип: number

<el-empty
  :image-size="200"
  description="Нет элементов"
/>

Размер задаётся в пикселях.

Использование слотов

Компонент поддерживает несколько слотов для гибкой кастомизации.

slot: image

Позволяет полностью заменить изображение.

<el-empty description="Нет результатов">
  <template #image>
    <img src="/images/search-empty.svg" />
  </template>
</el-empty>

Это полезно, когда необходимо использовать фирменную графику проекта.

slot: description

Позволяет использовать HTML или сложную разметку.

<el-empty>
  <template #description>
    <p>Результаты не найдены</p>
  </template>
</el-empty>

Возможна вставка любых компонентов.

slot: default (нижняя область)

Нижняя часть используется для кнопок или действий.

<el-empty description="Корзина пуста">
  <el-button type="primary">
    Перейти к покупкам
  </el-button>
</el-empty>

Это один из наиболее распространённых сценариев использования.

Использование с кнопками действий

Компонент часто используется вместе с кнопками.

<el-empty description="Список задач пуст">
  <el-button type="primary">
    Создать задачу
  </el-button>
</el-empty>

Таким образом интерфейс не только информирует пользователя об отсутствии данных, но и предлагает дальнейшее действие.

Использование в таблицах

Пустое состояние часто возникает в таблицах.

Пример:

<template>
  <div v-if="data.length === 0">
    <el-empty description="Нет записей" />
  </div>

  <el-table v-else :data="data">
  </el-table>
</template>

Альтернативный вариант — отображение Empty внутри контейнера таблицы.

Использование с результатами поиска

При отсутствии результатов поиска компонент становится частью UX-сценария.

<el-empty description="По вашему запросу ничего не найдено">
  <el-button type="primary">
    Очистить фильтры
  </el-button>
</el-empty>

Такая структура помогает пользователю быстрее исправить запрос.

Начальное состояние интерфейса

Иногда Empty используется не только для отсутствия данных, но и как стартовое состояние страницы.

Например:

<el-empty description="Проекты ещё не созданы">
  <el-button type="primary">
    Создать проект
  </el-button>
</el-empty>

В таком случае компонент выполняет роль onboarding-элемента.

Кастомизация внешнего вида

Стили компонента можно изменять через CSS.

Пример:

.el-empty {
  padding: 40px 0;
}

.el-empty__description {
  font-size: 16px;
}

Также можно стилизовать изображение:

.el-empty__image img {
  max-width: 240px;
}

Использование в карточках и сетках

Компонент часто размещается внутри контейнеров карточек.

<el-card>
  <el-empty description="Нет уведомлений" />
</el-card>

Такой подход позволяет сохранять структуру интерфейса даже при отсутствии данных.

Локализация

Текст описания можно адаптировать под разные языки через систему локализации приложения.

Пример:

<el-empty :description="$t('empty.noData')" />

Это особенно важно для крупных интерфейсов с мультиязычной поддержкой.

Комбинирование с состояниями загрузки

Empty часто используется совместно с loading-состоянием.

Типичный паттерн:

<template>
  <div v-if="loading">
    <el-skeleton rows="4" />
  </div>

  <el-empty
    v-else-if="items.length === 0"
    description="Данные отсутствуют"
  />

  <data-list v-else :items="items" />
</template>

Такая структура обеспечивает последовательность состояний интерфейса:

загрузка
отсутствие данных
отображение данных

UX-рекомендации при использовании Empty

Грамотное использование пустых состояний значительно улучшает пользовательский опыт.

Информативный текст

Описание должно объяснять причину отсутствия данных:

«Нет результатов поиска»
«Список задач пуст»
«У вас пока нет проектов»

Предложение действия

Если пользователь может изменить ситуацию, желательно добавить кнопку.

Примеры:

создать объект
изменить фильтр
очистить поиск

Использование иллюстраций

Иллюстрации делают интерфейс более дружелюбным и понятным.

Рекомендуется использовать:

лёгкие SVG-иллюстрации
фирменные изображения
тематическую графику

Контекстное сообщение

Текст должен соответствовать контексту страницы.

Плохо:

Нет данных

Лучше:

Нет сохранённых адресов доставки

Типовые сценарии применения

Пустой список сообщений

<el-empty description="Сообщений нет" />

Пустая корзина

<el-empty description="Ваша корзина пуста">
  <el-button type="primary">
    Перейти в каталог
  </el-button>
</el-empty>

Нет результатов фильтрации

<el-empty description="Фильтр не дал результатов">
  <el-button>
    Сбросить фильтр
  </el-button>
</el-empty>

Отсутствие уведомлений

<el-empty description="Новых уведомлений нет" />

Производительность

Компонент Empty является крайне лёгким:

не содержит сложной логики
практически не влияет на производительность
не требует реактивных вычислений

Он может безопасно использоваться даже в большом количестве интерфейсных состояний.

Доступность (Accessibility)

Компонент поддерживает базовые требования доступности:

корректная HTML-структура
семантический текст описания
возможность вставки доступных элементов управления

Для улучшения доступности рекомендуется:

использовать осмысленный текст
добавлять aria-атрибуты для кнопок действий
избегать графики без альтернативного текста

Практика организации пустых состояний

В крупных интерфейсах рекомендуется стандартизировать пустые состояния.

Распространённая архитектура:

components
 ├─ EmptyStates
 │   ├─ EmptyProjects.vue
 │   ├─ EmptyTasks.vue
 │   ├─ EmptyNotifications.vue

Каждый компонент может использовать el-empty, но с уникальной иллюстрацией и текстом.

Это обеспечивает:

единый стиль интерфейса
переиспользование кода
удобную поддержку.

Компонент Empty является важным элементом пользовательского интерфейса, позволяющим корректно обрабатывать ситуации отсутствия данных, улучшать навигацию пользователя и поддерживать визуальную целостность интерфейса даже при отсутствии контента.