API компонента Select

На этой странице представлено API компонента Select, включая описание пропсов, событий, слотов и публичных методов/состояний.

Пропсы

Компонент Select принимает следующие пропсы:

Пропс	По умолчанию	Тип	Описание
`dataSelect`	`[]`	`Array<BaseDataItem>`	Данные для выбора
`autoFocus`	`false`	`boolean`	Автоматический фокус на поле ввода при монтировании
`keySelect`	`"id"`	`string` или `"id"`	Ключ для уникальной идентификации элементов
`valueSelect`	`"value"`	`string` или `"value"`	Ключ для отображаемого значения элементов
`multiple`	`false`	`boolean`	Режим множественного выбора
`maxVisible`	`undefined`	`number`	Максимальное количество видимых элементов в выпадающем списке
`closeButtonBadge`	`false`	`BadgeProps["closeButton"]`	Кнопка закрытия для бейджей в режиме множественного выбора
`noData`	`"No data available"`	`string`	Текст при отсутствии данных
`noQuery`	`false`	`boolean`	Отключение фильтрации по поисковому запросу
`classSelect`	`"justify-end"`	`StyleClass` или `"justify-end"`	Кастомный CSS-класс для контейнера select
`classSelectList`	`""`	`StyleClass`	Кастомный CSS-класс для контейнера выпадающего списка
`classMaskQuery`	`"font-bold text-theme-700 dark:text-theme-300"`	`string`	Кастомный CSS-класс для маски текста поиска
`paramsFixWindow`	`{}`	`Omit<FixWindowProps, "modelValue">`	Конфигурация позиционирования выпадающего списка
`id`	`undefined`	`string`	Уникальный идентификатор компонента
`modelValue`	`undefined`	`number`/`string`/`NonNullable<unknown>`/`null`/`Array<number`/`string`/`null>`	Текущее значение поля выбора

События

Компонент Select генерирует следующие события:

Событие	Данные	Описание
`update:isInvalid`	`SelectProps["isInvalid"]`	Изменение состояния валидации
`update:modelValue`	`SelectProps["modelValue"]` или `null, Array<any>` или `undefined`	Обновление выбранного значения
`change:modelValue`	`SelectProps["modelValue"]` или `null, Array<any>` или `undefined`	Изменение выбранного значения
`isActive`	`boolean`	Изменение активности компонента

Слоты

Компонент Select предоставляет следующие слоты:

Слот	Данные	Описание
`default`	`VNode[]`	Основной контент компонента
`values`	`VNode[]`	Кастомное отображение выбранных значений
`item`	`VNode[]`	Кастомное отображение элементов списка
`before`	`VNode[]`	Контент перед полем выбора
`after`	`VNode[]`	Контент после поля выбора

Публичные методы

Компонент Select предоставляет следующие методы и состояния через ref:

Метод/Состояние	Значение	Описание
`layout`	`InputLayoutExpose` или `undefined`	Ссылка на компонент разметки ввода
`selectListWindow`	`FixWindowExpose` или `undefined`	Ссылка на окно выпадающего списка
`selectBody`	`HTMLElement` или `undefined`	Ссылка на DOM-элемент контейнера select
`selectList`	`HTMLElement` или `undefined`	Ссылка на DOM-элемент списка
`selectSearch`	`HTMLElement` или `undefined`	Ссылка на поле поиска
`selectItems`	`HTMLElement` или `undefined`	Ссылка на элементы списка
`activeItem`	`number`	Индекс активного элемента
`query`	`string`	Текущий поисковый запрос
`isOpenList`	`boolean`	Открыт ли выпадающий список
`classLayout`	`SelectProps["class"]`	CSS-класс разметки
`value`	`SelectProps["modelValue"]`	Текущее значение
`visibleValue`	`Array<any>`	Отображаемые значения
`valueKeys`	`Array<any>`	Ключи выбранных значений
`keySelect`	`SelectProps["keySelect"]` или `null`	Ключ идентификации элементов
`valueSelect`	`SelectProps["valueSelect"]` или `null`	Ключ отображаемых значений
`dataSelect`	`SelectProps["dataSelect"]`	Данные для выбора
`autoFocus`	`NonNullable<SelectProps["autoFocus"]>`	Автофокус включен?
`mode`	`NonNullable<SelectProps["mode"]>`	Текущий режим стилизации
`isDisabled`	`NonNullable<SelectProps["disabled"]>`	Компонент отключен?
`isLoading`	`NonNullable<SelectProps["loading"]>`	Идет загрузка?
`isInvalid`	`NonNullable<SelectProps["isInvalid"]>`	Невалидное состояние?
`messageInvalid`	`SelectProps["messageInvalid"]`	Сообщение об ошибке
`isValue`	`boolean`	Есть выбранное значение?
`isMultiple`	`NonNullable<SelectProps["multiple"]>`	Включен множественный выбор?
`maxVisible`	`SelectProps["maxVisible"]` или `undefined`	Максимум видимых элементов
`noData`	`NonNullable<SelectProps["noData"]>`	Текст при отсутствии данных
`isQuery`	`NonNullable<SelectProps["noQuery"]>`	Поиск отключен?
`classMaskQuery`	`NonNullable<SelectProps["classMaskQuery"]>`	CSS-класс маски поиска
`dataList`	`Array<any>`	Обработанные данные для отображения
`paramsFixWindow`	`NonNullable<SelectProps["paramsFixWindow"]>`	Параметры позиционирования списка
`classBase`	`SelectProps["classSelect"]`	CSS-класс базового контейнера
`classSelectList`	`SelectProps["classSelectList"]`	CSS-класс контейнера списка

Методы:

focusSelect(isFocus: boolean): void - Управление фокусом
openSelect(): void - Открыть список
closeSelect(event: MouseEvent): void - Закрыть список
select(selectValue: BaseDataItem | null): void - Выбрать/сбросить элемент