Выбор строк

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

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

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: '1', label: 'Элемент 1' },
        { value: '2', label: 'Элемент 2' },
        { value: '3', label: 'Элемент 3' },
      ],
    };
  },
};
</script>

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

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

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

Для выбора нескольких элементов используется атрибут multiple. Значение компонента при этом становится массивом.

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

<script>
export default {
  data() {
    return {
      selectedValues: [],
      options: [
        { value: 'a', label: 'Опция A' },
        { value: 'b', label: 'Опция B' },
        { value: 'c', label: 'Опция C' },
      ],
    };
  },
};
</script>

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

  • Можно задавать collapse-tags, чтобы визуально сокращать количество выбранных элементов.
  • Метод clearable позволяет пользователю сбросить все выбранные значения одним кликом.
  • При больших списках рекомендуется использовать filterable и слот remote-method для динамического поиска и подгрузки данных.

Фильтрация и поиск

Компонент поддерживает встроенную фильтрацию с помощью атрибута filterable:

<el-select v-model="searchValue" filterable placeholder="Начните ввод...">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
</el-select>

Для динамического поиска используется комбинация filterable и remote:

<el-select
  v-model="remoteValue"
  filterable
  remote
  reserve-keyword
  placeholder="Поиск элементов"
  :remote-method="fetchOptions"
>
  <el-option
    v-for="item in remoteOptions"
    :key="item.value"
    :label="item.label"
    :value="item.value"
  />
</el-select>

<script>
export default {
  data() {
    return {
      remoteValue: '',
      remoteOptions: [],
    };
  },
  methods: {
    fetchOptions(query) {
      if (query !== '') {
        // Асинхронный запрос к API
        setTimeout(() => {
          this.remoteOptions = [
            { value: query + '1', label: query + ' Опция 1' },
            { value: query + '2', label: query + ' Опция 2' },
          ];
        }, 500);
      } else {
        this.remoteOptions = [];
      }
    },
  },
};
</script>

Принципы работы поиска:

  • remote-method вызывается при каждом изменении ввода.
  • reserve-keyword сохраняет введённое значение при изменении списка опций.
  • Можно комбинировать с multiple для множественного выбора с динамическим поиском.

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

Element Plus позволяет кастомизировать отображение опций через слоты:

<el-select v-model="customValue" placeholder="Выберите элемент">
  <el-option
    v-for="item in options"
    :key="item.value"
    :value="item.value"
  >
    <template #default>
      <span style="color: blue;">{{ item.label }}</span>
    </template>
  </el-option>
</el-select>

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

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

Обработка событий

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

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

<script>
export default {
  data() {
    return {
      selectedValue: '',
      options: [
        { value: '1', label: 'Элемент 1' },
        { value: '2', label: 'Элемент 2' },
      ],
    };
  },
  methods: {
    onChange(value) {
      console.log('Выбрано:', value);
    },
  },
};
</script>

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

Резюме ключевых возможностей выбора строк

  • Поддержка одиночного и множественного выбора.
  • Возможность фильтрации и поиска, включая асинхронную загрузку.
  • Полная кастомизация через слоты.
  • События для полной интеграции с бизнес-логикой.
  • Clearable и collapse-tags для удобства пользователя.

Эти инструменты делают <el-select> гибким и мощным решением для всех случаев работы с выбором строк в интерфейсе на основе Element Plus.

Оглавление