Select и его возможности

Компонент Select из библиотеки Naive UI предназначен для выбора одного или нескольких значений из заранее определённого списка. Он используется в интерфейсах форм, фильтров, панелей настроек и административных систем, где требуется компактный и удобный механизм выбора данных.

В отличие от стандартного HTML-элемента <select>, компонент Sel ect предоставляет значительно более широкие возможности:

  • поиск по списку
  • множественный выбор
  • удаление выбранных элементов
  • асинхронную загрузку данных
  • виртуализацию длинных списков
  • кастомный рендер элементов
  • поддержку тегов
  • гибкую настройку поведения

Компонент входит в состав библиотеки Naive UI, разработанной для Vue 3, и активно использует возможности реактивности и Composition API.

Базовое использование

Минимальная конфигурация Select требует передачи списка вариантов через свойство options и модели выбранного значения через v-model:value.

<template>
  <n-select
    v-model:value="value"
    :options="options"
    placeholder="Выберите значение"
  />
</template>

<script setup>
import { ref } fr om 'vue'

const value = ref(null)

const options = [
  { label: 'JavaScript', value: 'js' },
  { label: 'TypeScript', value: 'ts' },
  { label: 'Python', value: 'py' }
]
</script>

Структура элемента options

Каждый объект списка имеет стандартную структуру:

Поле Назначение
label текст отображения
value значение
disabled блокировка пункта
children вложенные элементы

Пример:

const options = [
  {
    label: 'Frontend',
    value: 'frontend',
    children: [
      { label: 'Vue', value: 'vue' },
      { label: 'React', value: 'react' }
    ]
  }
]

Управление значением

Значение Select синхронизируется через v-model:value.

Одиночный выбор

<n-select v-model:value="value" :options="options" />

Тип значения:

string | number | null

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

Для включения множественного выбора используется свойство multiple.

<n-select
  v-model:value="value"
  :options="options"
  multiple
/>

Теперь модель содержит массив:

const value = ref([])

Пример результата:

["js", "ts"]

Placeholder

Свойство placeholder задаёт текст, отображаемый до выбора значения.

<n-select
  v-model:value="value"
  :options="options"
  placeholder="Выберите язык"
/>

Если значение выбрано, placeholder автоматически исчезает.

Отключение компонента

Полностью заблокировать Select можно через свойство disabled.

<n-select
  v-model:value="value"
  :options="options"
  disabled
/>

Пользователь не сможет открыть список или изменить значение.

Блокировка отдельных элементов

Отдельные пункты списка можно отключить.

const options = [
  { label: 'Vue', value: 'vue' },
  { label: 'React', value: 'react', disabled: true }
]

В интерфейсе такие элементы отображаются неактивными.

Очистка выбранного значения

Select поддерживает встроенную кнопку очистки.

<n-select
  v-model:value="value"
  :options="options"
  clearable
/>

После очистки значение становится:

null

или

[]

для множественного режима.

Поиск по списку

Для больших списков используется встроенный поиск.

<n-select
  v-model:value="value"
  :options="options"
  filterable
/>

После активации свойства:

  • появляется поле поиска
  • список автоматически фильтруется

Фильтрация происходит по полю label.

Кастомная фильтрация

Можно реализовать собственную функцию поиска.

<n-select
  v-model:value="value"
  :options="options"
  filterable
  :filter="customFilter"
/>
function customFilter(pattern, option) {
  return option.label
    .toLowerCase()
    .includes(pattern.toLowerCase())
}

Параметры функции:

Параметр Значение
pattern строка поиска
option текущий элемент

Теги (режим tag)

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

<n-select
  v-model:value="value"
  :options="options"
  filterable
  tag
/>

Теперь пользователь может:

  • выбирать из списка
  • вводить собственные значения

Модель будет содержать введённые строки.

Множественные теги

Комбинация multiple и tag создаёт интерфейс, похожий на менеджер тегов.

<n-select
  v-model:value="tags"
  :options="options"
  multiple
  filterable
  tag
/>

Пример значения:

["vue", "javascript", "backend"]

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

Свойство max-tag-count управляет отображением тегов.

<n-select
  v-model:value="value"
  :options="options"
  multiple
  :max-tag-count="2"
/>

Если элементов больше:

Vue React +3

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

Select может работать с удалёнными источниками данных.

Пример запроса к серверу:

<n-select
  v-model:value="value"
  filterable
  remote
  :options="options"
  :loading="loading"
  :on-search="handleSearch"
/>
const options = ref([])
const loading = ref(false)

async function handleSearch(query) {
  loading.value = true

  const result = await fetch(`/api/search?q=${query}`)
  const data = await result.json()

  options.value = data

  loading.value = false
}

Параметр remote отключает встроенную фильтрацию и передаёт управление разработчику.

Виртуализация списка

При работе с тысячами элементов используется виртуальный список.

<n-select
  v-model:value="value"
  :options="options"
  virtual-scroll
/>

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

  • рендерится только видимая часть списка
  • значительно снижается нагрузка на DOM
  • интерфейс остаётся быстрым даже при 10 000+ элементов

Кастомный рендер элементов

Select позволяет полностью контролировать отображение элементов.

<n-select
  v-model:value="value"
  :options="options"
  :render-label="renderLabel"
/>
function renderLabel(option) {
  return h(
    'span',
    { style: 'color: #409eff' },
    option.label
  )
}

Используется функция h из Vue.

Кастомный рендер выбранного значения

Можно изменить отображение выбранного элемента.

<n-select
  v-model:value="value"
  :options="options"
  :render-tag="renderTag"
/>
function renderTag({ option }) {
  return h(
    'span',
    { class: 'custom-tag' },
    `#${option.label}`
  )
}

Группировка элементов

Select поддерживает группы элементов.

const options = [
  {
    label: 'Frontend',
    type: 'group',
    children: [
      { label: 'Vue', value: 'vue' },
      { label: 'React', value: 'react' }
    ]
  },
  {
    label: 'Backend',
    type: 'group',
    children: [
      { label: 'Node.js', value: 'node' },
      { label: 'Python', value: 'python' }
    ]
  }
]

В интерфейсе появятся заголовки групп.

События компонента

Select генерирует ряд событий.

update:value

Вызывается при изменении значения.

<n-select
  :options="options"
  @update:value="handleChange"
/>
function handleChange(value) {
  console.log(value)
}

Срабатывает при вводе текста поиска.

<n-select
  filterable
  @search="handleSearch"
/>

focus

<n-select @focus="onFocus" />

blur

<n-select @blur="onBlur" />

Размеры компонента

Select поддерживает несколько размеров.

<n-select size="small" />
<n-select size="medium" />
<n-select size="large" />

Валидация в формах

Компонент интегрируется с n-form.

<n-form-item label="Язык">
  <n-select
    v-model:value="value"
    :options="options"
  />
</n-form-item>

Система валидации формы автоматически отслеживает изменения.

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

В элементы списка можно добавлять иконки.

const options = [
  {
    label: 'GitHub',
    value: 'github',
    icon: GithubIcon
  }
]

Кастомный рендер:

function renderLabel(option) {
  return h(
    'div',
    { class: 'option' },
    [
      h(option.icon),
      h('span', option.label)
    ]
  )
}

Производительность

При работе с большими списками рекомендуется:

  • использовать virtual-scroll
  • применять remote поиск
  • минимизировать количество реактивных обновлений
  • избегать сложного рендера элементов

Часто используемые свойства

Свойство Назначение
options список элементов
multiple множественный выбор
filterable поиск
tag ввод собственных значений
clearable кнопка очистки
disabled блокировка
remote удалённая фильтрация
virtual-scroll виртуализация
placeholder текст подсказки
size размер

Типовой паттерн использования

Наиболее распространённая конфигурация Select в приложениях:

<n-select
  v-model:value="value"
  :options="options"
  filterable
  clearable
  placeholder="Выберите значение"
/>

Такой вариант обеспечивает:

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

Компонент Select является одним из ключевых элементов библиотеки Naive UI и используется практически во всех интерфейсах, где требуется выбор данных из списка.

Оглавление