QSelect для выпадающих списков

QSelect — это компонент для создания выпадающих списков с множеством возможностей кастомизации. Он поддерживает одиночный и множественный выбор, поиск по элементам, асинхронную загрузку данных, динамическое отображение и различные стили.

Ключевые атрибуты:

  • v-model — связывает выбранное значение с переменной в состоянии компонента.
  • :options — массив объектов или строк для отображения в списке.
  • label — подпись поля ввода.

Массив options может быть простым:

options: ['Красный', 'Зелёный', 'Синий']

или объектным с ключами label и value:

options: [
  { label: 'Красный', value: 'red' },
  { label: 'Зелёный', value: 'green' },
  { label: 'Синий', value: 'blue' }
]

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

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

При множественном выборе v-model хранит массив выбранных значений. Поддерживаются следующие дополнительные опции:

  • emit-value — при активации v-model будет содержать только value элементов, а не объекты.
  • map-options — позволяет автоматически преобразовать объекты в нужный формат для хранения в v-model.

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

Компонент поддерживает встроенный поиск через атрибут use-input и событие filter:



methods: {
  filterOptions(val, update) {
    update(() => {
      this.options = this.optionsAll.filter(o => o.label.toLowerCase().includes(val.toLowerCase()));
    });
  }
}

use-input добавляет текстовое поле, позволяя пользователю фильтровать список. Функция filterOptions обрабатывает ввод и обновляет массив отображаемых опций.

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

QSelect может работать с асинхронными источниками. Например, при запросе к API:



methods: {
  async fetchOptions(val, update) {
    const response = await fetch(`https://api.example.com/items?q=${val}`);
    const data = await response.json();
    update(() => {
      this.options = data.map(item => ({ label: item.name, value: item.id }));
    });
  }
}

Асинхронная фильтрация обеспечивает динамическую подгрузку элементов и минимизирует нагрузку на клиент.

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

Можно изменять шаблон отображения элементов через слоты:
  • selected-item — отображение выбранного элемента.
  • option — отображение каждого элемента в списке.

Валидация и ограничения

QSelect поддерживает валидацию через rules:

Можно комбинировать несколько правил, включая кастомные проверки для массивов при множественном выборе.

Пользовательский интерфейс и стили

  • outlined — рамка вокруг поля.
  • filled — заполненное поле с цветной подложкой.
  • dense — уменьшенный размер поля.
  • popup-content-class — кастомизация стиля выпадающего списка.
  • hide-dropdown-icon — скрыть стрелку выпадающего списка.

Работа с событиями

  • @input — срабатывает при выборе значения.
  • @focus и @blur — отслеживание фокуса.
  • @clear — срабатывает при очистке значения.
  • @new-value — позволяет добавлять новые значения динамически.


methods: {
  addNewOption(val, done) {
    const newOption = { label: val, value: val.toLowerCase() };
    this.options.push(newOption);
    done(newOption);
  }
}

@new-value используется для создания опций на лету, например, при добавлении тегов.

Оглавление