Select

Компонент Select в библиотеке Element Plus используется для создания выпадающего списка с возможностью выбора одного или нескольких значений. Он поддерживает широкие возможности кастомизации и интеграцию с формами. Основная структура компонента выглядит следующим образом:

<template>
  <el-select v-model="selectedValue" placeholder="Выберите значение">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { label: 'Опция 1', value: '1' },
        { label: 'Опция 2', value: '2' },
        { label: 'Опция 3', value: '3' },
      ],
    };
  },
};
</script>

Ключевые моменты:

  • v-model связывает выбранное значение с переменной в компоненте.
  • el-option принимает атрибуты label (отображаемый текст) и value (внутреннее значение).
  • Атрибут placeholder задаёт текст подсказки до выбора значения.

Множественный выбор

Для выбора нескольких значений используется атрибут multiple. В этом случае v-model становится массивом:

<el-select v-model="selectedValues" multiple placeholder="Выберите значения">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { label: 'Красный', value: 'red' },
        { label: 'Зелёный', value: 'green' },
        { label: 'Синий', value: 'blue' },
      ],
    };
  },
};
</script>

Особенности множественного выбора:

  • Поддержка удаления выбранных элементов через крестик.
  • Возможность ограничения количества выбираемых элементов с помощью атрибута multiple-limit.
  • Автоматическая сортировка выбранных элементов в порядке выбора или по алфавиту (зависит от настройки value-key).

Поиск и фильтрация

Для больших списков используется режим поиска. Атрибут filterable позволяет вводить текст для фильтрации опций:

<el-select v-model="selectedValue" filterable placeholder="Поиск значения">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

Дополнительно можно использовать функцию filter-method для кастомной логики фильтрации:

<el-select
  v-model="selectedValue"
  filterable
  :filter-method="customFilter"
  placeholder="Кастомный поиск">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { label: 'Apple', value: 'apple' },
        { label: 'Banana', value: 'banana' },
        { label: 'Cherry', value: 'cherry' },
      ],
    };
  },
  methods: {
    customFilter(query, option) {
      return option.label.toLowerCase().includes(query.toLowerCase());
    },
  },
};
</script>

Преимущества кастомной фильтрации:

  • Позволяет фильтровать по сложным правилам (например, частичные совпадения, синонимы, категории).
  • Возможность интеграции с внешними данными и API.

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

Для динамических списков, где данные подгружаются с сервера, используется комбинация remote и remote-method:

<el-select
  v-model="selectedValue"
  filterable
  remote
  :remote-method="fetchOptions"
  placeholder="Выберите значение">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [],
    };
  },
  methods: {
    fetchOptions(query) {
      if (query !== '') {
        fetch(`https://api.example.com/search?q=${query}`)
          .then(res => res.json())
          .then(data => {
            this.options = data.map(item => ({
              label: item.name,
              value: item.id,
            }));
          });
      } else {
        this.options = [];
      }
    },
  },
};
</script>

Особенности работы с удалёнными данными:

  • remote-method вызывается при каждом вводе текста.
  • Атрибут loading может быть использован для отображения индикатора загрузки.
  • Можно ограничивать частоту вызовов с помощью debounce.

Настройка внешнего вида и поведения

Атрибуты

  • disabled — блокирует выбор.
  • clearable — добавляет кнопку очистки выбранного значения.
  • size — регулирует размер: medium, small, mini.
  • popper-class — позволяет добавить CSS-класс для выпадающего списка.
  • value-key — задаёт ключ объекта, который будет использоваться как значение при работе с объектами.

События

  • change — срабатывает при изменении выбранного значения.
  • visible-change — срабатывает при открытии/закрытии выпадающего списка.
  • remove-tag — используется при удалении выбранного элемента в множественном выборе.
  • clear — срабатывает при очистке значения.
<el-select
  v-model="selectedValue"
  placeholder="Выберите значение"
  @change="handleChange"
  @clear="handleClear">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { label: 'Option A', value: 'A' },
        { label: 'Option B', value: 'B' },
      ],
    };
  },
  methods: {
    handleChange(value) {
      console.log('Выбрано:', value);
    },
    handleClear() {
      console.log('Выбор очищен');
    },
  },
};
</script>

Использование с объектами

Для работы с объектами как значениями используется value-key. Это позволяет правильно отображать выбранные элементы и работать с массивами объектов:

<el-select
  v-model="selectedObject"
  placeholder="Выберите объект"
  value-key="id">
  <el-option
    v-for="item in objects"
    :key="item.id"
    :label="item.name"
    :value="item">
  </el-option>
</el-select>

<script>
export default {
  data() {
    return {
      selectedObject: null,
      objects: [
        { id: 1, name: 'Объект 1' },
        { id: 2, name: 'Объект 2' },
      ],
    };
  },
};
</script>

Преимущества такого подхода:

  • Легкая интеграция с данными из API.
  • Можно работать с полными объектами, а не только с простыми строками или числами.

Группировка опций

Компонент поддерживает группировку через el-option-group:

<el-select v-model="selectedValue" placeholder="Выберите значение">
  <el-option-group
    v-for="group in optionGroups"
    :key="group.label"
    :label="group.label">
    <el-option
      v-for="item in group.options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-option-group>
</el-select>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      optionGroups: [
        {
          label: 'Фрукты',
          options: [
            { label: 'Яблоко', value: 'apple' },
            { label: 'Банан', value: 'banana' },
          ],
        },
        {
          label: 'Овощи',
          options: [
            { label: 'Морковь', value: 'carrot' },
            { label: 'Помидор', value: 'tomato' },
          ],
        },
      ],
    };
  },
};
</script>

Группировка упрощает навигацию по длинным спискам и повышает удобство выбора.

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

Оглавление