Descriptions

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

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

Основной элемент — контейнер <el-descriptions>, внутри которого располагаются элементы <el-descriptions-item>.

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

Минимальный пример отображения набора данных:

<template>
  <el-descriptions title="Информация о пользователе">
    <el-descriptions-item label="Имя">Иван</el-descriptions-item>
    <el-descriptions-item label="Телефон">+7 777 123 45 67</el-descriptions-item>
    <el-descriptions-item label="Город">Алматы</el-descriptions-item>
    <el-descriptions-item label="Email">ivan@example.com</el-descriptions-item>
  </el-descriptions>
</template>

В результате формируется блок:

Поле Значение
Имя Иван
Телефон +7 777 123 45 67
Город Алматы
Email ivan@example.com

Основные элементы структуры

Контейнер

<el-descriptions>

Отвечает за общую компоновку.

Элемент

<el-descriptions-item>

Описывает одно поле.

Атрибуты компонента

title

Задает заголовок блока.

<el-descriptions title="Детали заказа">

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

column

Определяет количество колонок.

<el-descriptions :column="3">

Пример:

<el-descriptions title="Информация" :column="3">
  <el-descriptions-item label="Имя">Анна</el-descriptions-item>
  <el-descriptions-item label="Возраст">29</el-descriptions-item>
  <el-descriptions-item label="Город">Астана</el-descriptions-item>
</el-descriptions>

Данные автоматически распределяются по указанному количеству колонок.

border

Добавляет рамки, делая внешний вид похожим на таблицу.

<el-descriptions border>

Пример:

<el-descriptions title="Информация" border>
  <el-descriptions-item label="Статус">Активен</el-descriptions-item>
  <el-descriptions-item label="Роль">Администратор</el-descriptions-item>
</el-descriptions>

Без border блок выглядит более минималистично.

direction

Определяет направление отображения.

Возможные значения:

  • horizontal
  • vertical

По умолчанию используется horizontal.

Вертикальное отображение

При вертикальном режиме сначала отображаются все заголовки, затем значения.

<el-descriptions title="Информация" direction="vertical">
  <el-descriptions-item label="Имя">Сергей</el-descriptions-item>
  <el-descriptions-item label="Телефон">+7 700 000 00 00</el-descriptions-item>
  <el-descriptions-item label="Email">sergey@mail.com</el-descriptions-item>
</el-descriptions>

Визуально:

Имя Телефон Email
Сергей +7 700 000 00 00 sergey@mail.com

Такой вариант удобен для карточек и компактных панелей.

Управление шириной через span

Каждый элемент может занимать несколько колонок.

Атрибут:

span

Пример:

<el-descriptions :column="3" border>
  <el-descriptions-item label="Имя">Алексей</el-descriptions-item>
  <el-descriptions-item label="Телефон">+7 777 777 77 77</el-descriptions-item>
  <el-descriptions-item label="Адрес" :span="3">
    Казахстан, Алматы, ул. Абая 10
  </el-descriptions-item>
</el-descriptions>

Поле Адрес займет всю строку.

Использование slot для label

Вместо стандартного текста можно использовать слот.

<el-descriptions-item>
  <template #label>
    <el-icon>
      <User />
    </el-icon>
    Пользователь
  </template>
  admin
</el-descriptions-item>

Это позволяет:

  • добавлять иконки
  • стилизовать заголовок
  • выводить сложную разметку

Размеры компонента

Компонент поддерживает разные размеры через атрибут size.

Возможные значения:

  • large
  • default
  • small

Пример:

<el-descriptions size="small">

Малые размеры полезны в плотных интерфейсах административных панелей.

Комбинирование с другими компонентами

Descriptions часто используется совместно с другими компонентами Element Plus:

  • Card
  • Dialog
  • Drawer
  • Tabs

Пример внутри карточки:

<el-card>
  <el-descriptions title="Профиль пользователя" border>
    <el-descriptions-item label="ID">1024</el-descriptions-item>
    <el-descriptions-item label="Имя">Мария</el-descriptions-item>
    <el-descriptions-item label="Роль">Менеджер</el-descriptions-item>
    <el-descriptions-item label="Email">maria@mail.com</el-descriptions-item>
  </el-descriptions>
</el-card>

Такой паттерн широко применяется в интерфейсах CRM и административных систем.

Динамическое создание полей

При работе с API данные удобно генерировать через цикл.

<template>
  <el-descriptions title="Пользователь">
    <el-descriptions-item
      v-for="item in userInfo"
      :key="item.label"
      :label="item.label"
    >
      {{ item.value }}
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup>
const userInfo = [
  { label: 'Имя', value: 'Ирина' },
  { label: 'Возраст', value: 32 },
  { label: 'Город', value: 'Караганда' },
]
</script>

Такой подход облегчает:

  • генерацию интерфейса
  • обновление данных
  • работу с REST API

Адаптивное поведение

Количество колонок можно адаптировать под ширину экрана.

Пример с вычисляемым значением:

<el-descriptions :column="columns">
import { ref, onMounted } from 'vue'

const columns = ref(3)

onMounted(() => {
  if (window.innerWidth < 768) {
    columns.value = 1
  }
})

В мобильной версии данные будут отображаться в одну колонку.

Стилизация

Компонент можно кастомизировать через CSS.

Пример изменения цвета заголовков:

.el-descriptions__label {
  font-weight: 600;
  color: #409eff;
}

Изменение отступов:

.el-descriptions__body td {
  padding: 12px 20px;
}

Практический пример: карточка заказа

<template>
  <el-descriptions
    title="Информация о заказе"
    :column="2"
    border
  >
    <el-descriptions-item label="Номер заказа">
      #54821
    </el-descriptions-item>

    <el-descriptions-item label="Статус">
      Оплачен
    </el-descriptions-item>

    <el-descriptions-item label="Клиент">
      Александр Петров
    </el-descriptions-item>

    <el-descriptions-item label="Телефон">
      +7 701 555 22 11
    </el-descriptions-item>

    <el-descriptions-item label="Адрес" :span="2">
      Казахстан, Астана, ул. Назарбаева 15
    </el-descriptions-item>

    <el-descriptions-item label="Дата заказа">
      12.05.2025
    </el-descriptions-item>

    <el-descriptions-item label="Сумма">
      85 000 ₸
    </el-descriptions-item>
  </el-descriptions>
</template>

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

Оглавление