Фиксированный заголовок

Для работы с Element Plus необходимо иметь проект на Vue 3. Библиотека поддерживает установку через пакетный менеджер npm или yarn:

npm install element-plus --save
# или
yarn add element-plus

После установки подключение компонентов производится в основном файле приложения, обычно main.js или main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

Подключение всего пакета позволяет использовать все компоненты без отдельного импорта, однако для оптимизации сборки можно подключать компоненты по отдельности через ES Modules.

Работа с компонентами

Кнопка (Button)

Компонент ElButton является базовым элементом управления. Основные параметры:

  • type — стиль кнопки (primary, success, warning, danger, info, text)
  • size — размер (medium, small, mini)
  • disabled — блокировка кнопки

Пример использования:

<template>
  <el-button type="primary" @click="handleClick">Основная кнопка</el-button>
  <el-button type="success" size="small">Успешная кнопка</el-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Кнопка нажата')
    }
  }
}
</script>

Форма и элементы ввода

ElForm и связанные компоненты позволяют создавать интерактивные формы с валидацией:

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Имя" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="Email" prop="email">
      <el-input v-model="form.email"></el-input>
    </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>
export default {
  data() {
    return {
      form: {
        name: '',
        email: ''
      },
      rules: {
        name: [{ required: true, message: 'Введите имя', trigger: 'blur' }],
        email: [
          { required: true, message: 'Введите email', trigger: 'blur' },
          { type: 'email', message: 'Неверный формат email', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log('Форма валидна', this.form)
        } else {
          console.log('Ошибка валидации')
        }
      })
    },
    resetForm() {
      this.$refs.formRef.resetFields()
    }
  }
}
</script>

Особенность Element Plus — автоматическая валидация и гибкая настройка правил с использованием prop в el-form-item.

Таблицы (Table)

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

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Дата" width="180"></el-table-column>
    <el-table-column prop="name" label="Имя" width="180"></el-table-column>
    <el-table-column prop="address" label="Адрес"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2026-03-18', name: 'Иван', address: 'Москва, Россия' },
        { date: '2026-03-17', name: 'Анна', address: 'Санкт-Петербург, Россия' }
      ]
    }
  }
}
</script>

Ключевые возможности:

  • Сортировка через sortable
  • Фильтры через filters и filter-method
  • Выбор строк через type="selection" в el-table-column
  • Поддержка пагинации через ElPagination
<el-pagination
  background
  layout="prev, pager, next"
  :total="50"
  :page-size="10"
  v-model:current-page="currentPage">
</el-pagination>

Модальные окна (Dialog)

ElDialog обеспечивает удобную работу с всплывающими окнами. Основные свойства:

  • title — заголовок модального окна
  • visible — контроль отображения через v-model
  • width — ширина окна
  • before-close — функция перед закрытием для подтверждения действий

Пример:

<template>
  <el-button type="primary" @click="dialogVisible = true">Открыть окно</el-button>
  <el-dialog
    title="Пример диалога"
    v-model="dialogVisible"
    width="30%">
    <p>Содержимое модального окна</p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Отмена</el-button>
      <el-button type="primary" @click="confirm">Подтвердить</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return { dialogVisible: false }
  },
  methods: {
    confirm() {
      console.log('Действие подтверждено')
      this.dialogVisible = false
    }
  }
}
</script>

Уведомления и сообщения

ElMessage и ElNotification используются для вывода кратких уведомлений пользователю.

import { ElMessage } from 'element-plus'

ElMessage({
  message: 'Операция успешно выполнена',
  type: 'success',
  duration: 2000
})

Для системных уведомлений:

import { ElNotification } from 'element-plus'

ElNotification({
  title: 'Предупреждение',
  message: 'Произошла ошибка при загрузке данных',
  type: 'warning'
})

Особенность — возможность кастомизации позиции, времени отображения и типа уведомления.

Система сетки (Grid)

ElRow и ElCol позволяют создавать адаптивные макеты. Основные параметры:

  • span — количество колонок (максимум 24)
  • offset — смещение колонки
  • gutter — отступ между колонками в ElRow

Пример:

<el-row :gutter="20">
  <el-col :span="8"><div class="grid-item">Колонка 1</div></el-col>
  <el-col :span="8"><div class="grid-item">Колонка 2</div></el-col>
  <el-col :span="8"><div class="grid-item">Колонка 3</div></el-col>
</el-row>

Сетка автоматически адаптируется под размеры экрана, обеспечивая отзывчивость интерфейса.

Кастомизация темы

Element Plus поддерживает динамическую настройку переменных SCSS или CSS-переменных для изменения цветов, размеров и стилей компонентов. Пример изменения основного цвета:

:root {
  --el-color-primary: #409eff;
}

Также возможно использование темы через theme-chalk:

import 'element-plus/theme-chalk/el-button.css'

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

Реактивные утилиты

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

  • useLoading — управление индикаторами загрузки
  • useMessage — реактивное создание сообщений
  • useNotification — уведомления с реактивной интеграцией

Пример использования useLoading:

import { ElLoading } from 'element-plus'

const loadingInstance = ElLoading.service({ text: 'Загрузка...' })
setTimeout(() => loadingInstance.close(), 2000)

Эти утилиты обеспечивают интеграцию с Composition API, упрощая работу с состоянием компонентов.

Эта структура и примеры покрывают ключевые аспекты Element Plus: установку, работу с компонентами, таблицами, формами, модальными окнами, уведомлениями, сеткой и кастомизацией темы. Использование этих инструментов позволяет создавать полноценные интерфейсы на Vue 3 с минимальной дополнительной разработкой.

Оглавление