Form

Element Plus предоставляет мощный набор компонентов для построения форм в приложениях на Vue 3. Основным компонентом является <el-form>, который обеспечивает структуру формы, управление данными, валидацию и стилизацию.

<template>
  <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px">
    <el-form-item label="Имя" prop="name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="Возраст" prop="age">
      <el-input-number v-model="formData.age" :min="0" :max="120"></el-input-number>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Отправить</el-button>
      <el-button @click="resetForm">Сбросить</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'

const formRef = ref(null)
const formData = ref({
  name: '',
  age: null
})

const rules = {
  name: [
    { required: true, message: 'Пожалуйста, введите имя', trigger: 'blur' }
  ],
  age: [
    { type: 'number', required: true, message: 'Введите возраст', trigger: 'change' }
  ]
}

const submitForm = () => {
  formRef.value.validate(valid => {
    if (valid) {
      console.log('Форма успешно отправлена', formData.value)
    } else {
      console.log('Ошибка валидации')
      return false
    }
  })
}

const resetForm = () => {
  formRef.value.resetFields()
}
</script>

Основные параметры <el-form>

  • model — объект с данными формы. Используется для двусторонней привязки через v-model в элементах формы.
  • rules — объект правил валидации, где ключи соответствуют полям формы, а значения — массивы правил.
  • label-width — ширина меток формы. Может задаваться в пикселях или процентах.
  • inline — если true, все элементы формы отображаются в одну строку, полезно для компактных форм.
  • size — размер элементов формы (medium, small, mini).

Компонент <el-form-item>

<el-form-item> связывает отдельное поле с объектом данных и правилами валидации. Ключевые атрибуты:

  • label — текст метки поля.
  • prop — имя свойства в объекте model, для которого применяется валидация.
  • error — позволяет вручную задать сообщение об ошибке.
  • required — отображение индикатора обязательного поля без использования правил валидации.

Поддержка различных полей формы

Element Plus интегрируется с большинством своих компонентов ввода:

  • <el-input> — однострочное текстовое поле.
  • <el-input-number> — числовой ввод с кнопками увеличения/уменьшения.
  • <el-select> — выпадающий список с поддержкой поиска и множественного выбора.
  • <el-checkbox> и <el-checkbox-group> — одиночные и групповые чекбоксы.
  • <el-radio> и <el-radio-group> — радиокнопки для выбора одного варианта.
  • <el-switch> — переключатель состояния.
  • <el-date-picker> — выбор даты и времени.
<el-form-item label="Пол" prop="gender">
  <el-radio-group v-model="formData.gender">
    <el-radio label="male">Мужской</el-radio>
    <el-radio label="female">Женский</el-radio>
  </el-radio-group>
</el-form-item>

Валидация

В Element Plus используется встроенная система валидации на основе async-validator. Основные типы правил:

  • required — обязательное поле.
  • type — тип значения (string, number, array, boolean, date).
  • pattern — регулярное выражение для проверки формата.
  • min / max / len — проверка длины строки или диапазона чисел.
  • validator — пользовательская функция для сложной логики.

Пример пользовательской валидации:

const rules = {
  password: [
    { required: true, message: 'Введите пароль', trigger: 'blur' },
    { validator: (rule, value) => value.length >= 6, message: 'Пароль должен быть минимум 6 символов', trigger: 'blur' }
  ]
}

Управление формой

Элементы формы можно контролировать через ref:

  • validate(callback) — проверка всех полей. callback получает true или false.
  • validateField(prop, callback) — проверка одного поля.
  • resetFields() — сброс значений и ошибок.
  • clearValidate(props) — очистка ошибок без изменения данных.

Лейблы и выравнивание

  • label-position (right, left, top) — определяет позицию текста метки.
  • label-width может быть глобально установлен через ElForm или локально для <el-form-item>.
  • Комбинируя inline и label-width, можно создавать горизонтальные или вертикальные формы.

Работа с динамическими формами

Динамическая генерация полей возможна через v-for. Важно правильно назначать prop и key:

<el-form-item
  v-for="(field, index) in dynamicFields"
  :key="index"
  :label="field.label"
  :prop="field.name"
>
  <el-input v-model="formData[field.name]"></el-input>
</el-form-item>

Интернационализация и кастомизация

Element Plus поддерживает локализацию через ElLocaleProvider. Для кастомизации стилей форм используется глобальная тема и классы:

  • size — влияет на все вложенные элементы (medium, small, mini).
  • class и style — для индивидуальной стилизации <el-form> и <el-form-item>.
  • Возможность использовать CSS-переменные для тонкой настройки отступов, цвета и шрифта.

Расширенные возможности

  • Validate on change / blur — триггеры валидации для каждого поля (change, blur).
  • Custom rules messages — настраиваемые сообщения об ошибках.
  • Disabled / readonly fields — поддержка заблокированных полей без отключения всей формы.
  • Integration with Vuex / Pinia — двусторонняя синхронизация данных формы с состоянием приложения.

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

Оглавление