Form Item

el-form-item — это базовый строительный блок форм в библиотеке Element Plus. Он отвечает за группировку элементов формы, управление их валидацией, отображение меток (labels) и сообщений об ошибках. Обычно используется вместе с компонентом el-form.
  • label — текст, отображаемый слева от элемента формы.
  • prop — ключ из объекта модели, связанный с текущим полем для валидации.
  • v-model на вложенном элементе формы связывает данные модели с полем.

Свойства el-form-item

Свойство Тип Описание
label String Текст метки поля.
prop String Ключ в модели формы для привязки и валидации.
required Boolean Явно указывает, что поле обязательное.
rules Array/Object Локальные правила валидации для конкретного элемента, переопределяют глобальные из el-form.
error String Сообщение об ошибке, можно задать вручную для элемента.
show-message Boolean Управляет отображением сообщений об ошибке.
inline-message Boolean Отображает ошибку рядом с полем, вместо стандартного блока под ним.
size String Размер компонента: medium, small, mini.
label-width String Задает ширину метки для конкретного элемента, переопределяя ширину формы.
label-suffix String Символ, добавляемый к метке (например, :).
show-label Boolean Отображать ли метку, если значение false, метка не выводится.

Валидация и правила

Элемент el-form-item тесно связан с системой валидации Element Plus. Каждое поле можно валидировать локально через rules или глобально через el-form. Основные типы правил:

  • required — поле обязательно.
  • min/max — минимальная и максимальная длина значения.
  • pattern — регулярное выражение для проверки формата.
  • validator — функция пользовательской проверки.
rules: {
  name: [
    { required: true, message: 'Введите имя', trigger: 'blur' },
    { min: 3, max: 20, message: 'Длина от 3 до 20 символов', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: 'Неверный email', trigger: ['blur', 'change'] }
  ]
}
  • trigger определяет, когда будет выполняться валидация (blur — при потере фокуса, change — при изменении значения).

Расположение и размеры

el-form-item поддерживает настройку ширины метки и размера элементов.
  • label-width позволяет задавать ширину конкретной метки, не меняя остальных полей формы.
  • size влияет на вложенные компоненты (el-input, el-select и т.д.), поддерживаются значения medium, small, mini.

Вложенные компоненты

el-form-item может содержать практически любой компонент Element Plus, который поддерживает v-model. Наиболее часто используемые:

  • el-input — текстовые поля.
  • el-select — выпадающий список.
  • el-radio-group и el-checkbox-group — группы радиокнопок и чекбоксов.
  • el-date-picker — выбор даты или диапазона дат.
  • el-switch — переключатель логического значения.

Пример с несколькими типами полей:

Пользовательские ошибки и сообщения

Можно вручную управлять ошибками, задавая error:

  • show-message и inline-message помогают контролировать, где и как показывается сообщение.

Настройка меток

  • label-suffix добавляет символ после текста метки:
  • show-label="false" позволяет скрыть метку полностью, что удобно для компактных интерфейсов.

Динамические формы и el-form-item

el-form-item можно рендерить динамически через v-for:
  • Полезно для форм с непредсказуемым количеством полей.
  • Легко комбинировать с динамическими правилами валидации.

Гибкие компоненты и стилизация

  • Поддерживает CSS-классы через class или :class, что позволяет изменять внешний вид меток, ошибок и полей.
  • С помощью слотов label можно полностью кастомизировать отображение метки:
  • Совместно с el-form позволяет создавать комплексные и адаптивные формы с индивидуальной настройкой каждого поля.
Оглавление