Частые ошибки

Одной из самых распространённых проблем является неправильная установка библиотеки или её подключение к проекту. При использовании npm или yarn необходимо убедиться, что версии Vue и Element Plus совместимы. Например, Element Plus версии 2.x рассчитан на Vue 3.x. Попытка подключить его к Vue 2 приведёт к ошибкам сборки и runtime.

При импорте компонентов часто делают глобальный импорт всего пакета, что увеличивает размер сборки. Вместо:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

лучше использовать только необходимые компоненты:

import { ElButton, ElInput } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/input/style/css'

Это уменьшает размер бандла и ускоряет загрузку приложения.

Ошибки при использовании компонентов

1. Неправильное именование компонентов

Element Plus использует префикс El для всех своих компонентов. Попытка использовать <Button> вместо <ElButton> приведёт к ошибке рендеринга. Также важно, чтобы в шаблоне имя компонента соответствовало тому, что импортировано в скрипте.

2. Неправильная работа с props

Многие компоненты имеют строгие требования к типам props. Например, ElTable требует массив для свойства data. Передача null или объекта вместо массива вызовет предупреждения в консоли и неправильное отображение таблицы.

<el-table :data="tableData">
</el-table>

<script>
export default {
  data() {
    return {
      tableData: null // Ошибка: должно быть массивом
    }
  }
}
</script>

3. Игнорирование слотов

Некоторые компоненты требуют обязательного использования слотов для корректного отображения. Например, ElFormItem без слота default не покажет содержимое формы.

<el-form-item label="Имя">
  <el-input v-model="name"></el-input>
</el-form-item>

Ошибка возникает, если забыть <el-input> внутри <el-form-item>.

Ошибки при работе с динамическими данными

1. Асинхронная загрузка данных

Компоненты, такие как ElSelect или ElTable, часто используют данные, загружаемые асинхронно. Ошибка возникает, когда массив данных ещё не получен, а компонент пытается его отобразить.

<el-select v-model="selected" :options="options"></el-select>

<script>
export default {
  data() {
    return {
      options: [] // ещё не загружены данные
    }
  },
  async mounted() {
    const response = await fetch('/api/options')
    this.options = await response.json()
  }
}
</script>

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

2. Отсутствие реактивности

Element Plus тесно интегрирован с Vue. Использование обычных объектов без реактивности (ref или reactive) может привести к тому, что изменения данных не будут обновлять компонент.

<script setup>
const data = {} // Ошибка: изменения не отслеживаются
</script>

Правильное решение — использовать reactive или ref:

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

const data = reactive({ name: '' })
</script>

Ошибки стилизации

1. Несовпадение тем и CSS

Element Plus поддерживает темизацию, но неправильный импорт CSS может привести к сломанной верстке. Частая ошибка — использовать CSS из другой версии библиотеки или не импортировать стили вовсе.

import 'element-plus/dist/index.css' // корректно для глобальной темы

Для локального импорта компонентов стили нужно подключать отдельно:

import 'element-plus/es/components/button/style/css'

2. Конфликты с глобальными стилями

Пользовательские стили могут перекрывать стандартные классы Element Plus (.el-button, .el-input). Это вызывает непредсказуемое поведение и поломку дизайна. Решение — использовать scoped CSS или корректно настроенные селекторы.

Ошибки при работе с событиями

1. Неправильная обработка событий

Многие компоненты используют кастомные события с префиксом update: для двустороннего биндинга. Ошибка — пытаться использовать стандартный v-model без привязки к конкретному prop.

<el-input v-model="text"></el-input> // правильно, v-model синтаксический сахар для value + update:value

Некоторые события нужно подписывать через @change или @input, а не просто полагаться на DOM-события.

2. Несоответствие типов данных при emit

Если компонент ожидает число, а событие emit возвращает строку, это приведёт к багам:

<el-slider v-model="value"></el-slider>

<script>
export default {
  data() {
    return {
      value: '50' // должно быть число, иначе некорректное поведение
    }
  }
}
</script>

Ошибки в конфигурации глобальных настроек

Element Plus позволяет настроить глобальные параметры через app.use(ElementPlus, { ... }). Частая ошибка — попытка изменить настройки после инициализации приложения. Глобальные параметры нужно задавать только при подключении библиотеки, иначе они не применяются.

import { createApp } from 'vue'
import ElementPlus from 'element-plus'

const app = createApp(App)

app.use(ElementPlus, { size: 'small', zIndex: 3000 }) // корректно

Попытка изменить size позднее через app.config.globalProperties.$ELEMENT.size часто не работает для новых компонентов.

Ошибки в локализации

Element Plus поддерживает международные переводы. Распространённая ошибка — некорректный импорт языка или отсутствие применения к приложению.

import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, { locale: zhCn }) // правильно

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

Частые проблемы с динамическим рендером

Компоненты, создаваемые через v-if или динамический рендеринг, иногда теряют внутренние состояния (например, ElCollapse, ElTabs). Ошибка — менять ключи компонентов или скрывать их через v-if вместо v-show, что приводит к сбросу состояний.

Правильный подход:

  • Использовать v-show, если нужно просто скрыть компонент, сохраняя его состояние.
  • Для динамических списков применять уникальные key, чтобы Vue корректно отслеживал элементы.
Оглавление