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

В библиотеке Element Plus для реализации множественного выбора используется компонент <el-select> с атрибутом multiple. Этот компонент позволяет пользователю выбрать сразу несколько значений из заданного списка и управлять их отображением и поведением.

<template>
  <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>
</template>

<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { value: 'apple', label: 'Яблоко' },
        { value: 'orange', label: 'Апельсин' },
        { value: 'banana', label: 'Банан' },
        { value: 'grape', label: 'Виноград' }
      ]
    };
  }
};
</script>

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

  • v-model связывает выбранные значения с реактивной переменной.
  • Атрибут multiple позволяет выбирать несколько значений.
  • Каждый элемент списка определяется через <el-option> с параметрами value и label.

Настройка отображения выбранных элементов

По умолчанию выбранные значения отображаются внутри поля ввода через запятую. Для удобства пользовательского интерфейса можно включить теги (collapse-tags) или использовать слоты для кастомизации.

<el-select
  v-model="selectedValues"
  multiple
  collapse-tags
  placeholder="Выберите фрукты">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

Особенности:

  • collapse-tags сворачивает длинный список выбранных значений в одну метку с количеством выбранных элементов.
  • filterable позволяет включить поиск по значениям.
  • allow-create позволяет пользователю добавлять новые значения прямо в список.

Поиск и фильтрация элементов

Для больших списков часто используется фильтрация по вводимому тексту. Element Plus поддерживает это через filterable и кастомную функцию фильтрации через filter-method.

<el-select
  v-model="selectedValues"
  multiple
  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 {
      selectedValues: [],
      options: [
        { value: 'apple', label: 'Яблоко' },
        { value: 'orange', label: 'Апельсин' },
        { value: 'banana', label: 'Банан' },
        { value: 'grape', label: 'Виноград' }
      ]
    };
  },
  methods: {
    customFilter(query, item) {
      return item.label.toLowerCase().includes(query.toLowerCase());
    }
  }
};
</script>

Пояснения:

  • filterable делает поле ввода интерактивным для поиска.
  • filter-method позволяет полностью контролировать процесс фильтрации, включая нечувствительность к регистру, сложные алгоритмы поиска или сопоставление по нескольким полям объекта.

Ограничение количества выбранных элементов

Для случаев, когда необходимо ограничить количество выбранных элементов, используется атрибут :max-tag-count.

<el-select
  v-model="selectedValues"
  multiple
  collapse-tags
  :max-tag-count="2"
  placeholder="Выберите фрукты">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

Эффект:

  • Только два выбранных значения будут отображаться в поле ввода.
  • Остальные значения скрываются, а на их месте показывается метка с количеством скрытых элементов.

Настройка событий и реактивного управления

Компонент <el-select> предоставляет ряд событий для обработки выбора:

  • change — срабатывает при изменении выбранных значений.
  • visible-change — срабатывает при открытии или закрытии выпадающего списка.
  • remove-tag — срабатывает при удалении отдельного значения в режиме множественного выбора.
<el-select
  v-model="selectedValues"
  multiple
  placeholder="Выберите фрукты"
  @change="handleChange"
  @remove-tag="handleRemoveTag">
  <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: [
        { value: 'apple', label: 'Яблоко' },
        { value: 'orange', label: 'Апельсин' },
        { value: 'banana', label: 'Банан' },
        { value: 'grape', label: 'Виноград' }
      ]
    };
  },
  methods: {
    handleChange(value) {
      console.log('Выбранные значения:', value);
    },
    handleRemoveTag(removedValue) {
      console.log('Удалённое значение:', removedValue);
    }
  }
};
</script>

Кастомизация внешнего вида элементов

Element Plus позволяет полностью настраивать отображение элементов через слоты. Например, можно добавить иконки или подсказки к каждому элементу списка:

<el-select v-model="selectedValues" multiple placeholder="Выберите фрукты">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    <template #default>
      <span>{{ item.label }}</span>
      <i class="el-icon-check" v-if="selectedValues.includes(item.value)"></i>
    </template>
  </el-option>
</el-select>

Особенности:

  • Слот #default позволяет добавлять кастомные элементы в каждом пункте.
  • Можно включать динамические индикаторы выбора, иконки или цветовую маркировку.

Связка с формами и валидация

Компонент множественного выбора интегрируется с <el-form> для валидации данных:

<el-form :model="form" :rules="rules" ref="formRef">
  <el-form-item label="Фрукты" prop="fruits">
    <el-select v-model="form.fruits" multiple placeholder="Выберите фрукты">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </el-form-item>
  <el-button type="primary" @click="submitForm">Отправить</el-button>
</el-form>

<script>
export default {
  data() {
    return {
      form: { fruits: [] },
      options: [
        { value: 'apple', label: 'Яблоко' },
        { value: 'orange', label: 'Апельсин' },
        { value: 'banana', label: 'Банан' }
      ],
      rules: {
        fruits: [
          { type: 'array', required: true, message: 'Выберите хотя бы один фрукт', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          console.log('Форма успешно отправлена', this.form);
        } else {
          console.log('Ошибка валидации');
        }
      });
    }
  }
};
</script>

Преимущества:

  • Валидация множественного выбора легко настраивается через массив правил.
  • Совместимость с динамическими формами и реактивными данными.

Эти возможности делают компонент <el-select multiple> универсальным инструментом для реализации сложных интерфейсов выбора, удобных для пользователя и легко интегрируемых с Vue 3.

Оглавление