el select v2
1.4.6
Компонент селектора виртуального списка, основанный на пользовательском интерфейсе Element для версии Vue 2.
Онлайн демо
npm i el-select-v2 npm i element-ui
import Vue from 'vue' ;
// 必须引入 element-ui
import ElementUI from 'element-ui' ;
import 'element-ui/lib/theme-chalk/index.css' ;
import ElSelectV2 from 'el-select-v2' ;
Vue . use ( ElSelectV2 ) ; < template >
< el-select-v2 v-model = " value " :options = " options " />
</ template >
< script >
export default {
data () {
return {
options : [],
value : ' ' ,
};
},
created () {
for ( let i = 0 ; i < 10000 ; i ++ ) {
this . options . push ({
value : ` value ${ i + 1 } ` ,
label : ` label ${ i + 1 } ` ,
});
}
},
};
</ script >Пример кода
| параметр | иллюстрировать | тип | Необязательное значение | значение по умолчанию |
|---|---|---|---|---|
| значение/v-модель | Обязательное значение | логическое значение/строка/число | — | — |
| параметры | Список данных | множество | — | — |
| ключ значения | имя ключа значения | нить | — | ценить |
| метка-ключ | имя ключа метки | нить | — | этикетка |
| опция-ключ (1.4.6) | имя ключа опций | нить | — | параметры |
| отключенная клавиша (1.4.1) | имя отключенного ключа | нить | — | неполноценный |
| ключ объекта (1.4.0) | Имя ключа, если связанное значение является типом объекта. | нить | — | ценить |
| минимальный размер элемента | Минимальная высота для каждого варианта | число | — | 34 |
| несколько | Стоит ли выбирать несколько | логическое значение | — | ЛОЖЬ |
| неполноценный | Стоит ли отключать | логическое значение | — | ЛОЖЬ |
| размер | Размер поля ввода | нить | средний/маленький/мини | — |
| очищаемый | Можно ли очистить опции | логическое значение | — | ЛОЖЬ |
| коллапс-теги | Отображать ли выбранное значение в виде текста при выборе нескольких вариантов | логическое значение | — | ЛОЖЬ |
| многолимитный | Максимальное количество элементов, которые пользователь может выбрать при выборе нескольких элементов. Если оно равно 0, ограничений нет. | число | — | 0 |
| имя | Атрибут имени выбранного ввода | нить | — | — |
| автозаполнение | атрибут автозаполнения выбранного ввода | нить | — | выключенный |
| заполнитель | заполнитель | нить | — | Пожалуйста, выберите |
| фильтруемый | Это доступно для поиска? | логическое значение | — | ЛОЖЬ |
| разрешить-создать | Разрешено ли пользователям создавать новые записи, необходимо использовать с filterable | логическое значение | — | ЛОЖЬ |
| фильтр-метод | Пользовательский метод поиска | функция | — | — |
| удаленный | Будь то удаленный поиск | логическое значение | — | ЛОЖЬ |
| удаленный метод | Метод удаленного поиска | функция | — | — |
| загрузка | Получаются ли данные удаленно | логическое значение | — | ЛОЖЬ |
| загрузочный текст | Текст, отображаемый во время удаленной загрузки | нить | — | загрузка |
| несоответствующий текст | Текст, отображаемый, когда ни одно условие поиска не соответствует, вы также можете использовать настройку slot="empty" | нить | — | Нет соответствующих данных |
| текст без данных | Текст, отображаемый, когда опция пуста, также можно установить с помощью slot="empty" | нить | — | Нет данных |
| поппер-класс | Выберите имя класса в раскрывающемся списке. | нить | — | — |
| резервное ключевое слово | При множественном выборе и возможности поиска, следует ли сохранять текущее ключевое слово поиска после выбора параметра. | логическое значение | — | истинный |
| первый вариант по умолчанию | Нажмите Enter в поле ввода и выберите первое совпадение. Необходимо использовать с filterable или remote | логическое значение | — | ЛОЖЬ |
| поппер-добавление к телу | Вставлять ли всплывающее окно в элемент body. Если возникает проблема с расположением всплывающего окна, вы можете установить для этого свойства значение false. | логическое значение | — | истинный |
| автоматический раскрывающийся список | Для недоступного для поиска Выберите, будет ли автоматически открываться меню параметров после того, как поле ввода получит фокус. | логическое значение | — | ЛОЖЬ |
| ширина ввода-подстройки (1.1.0) | Будет ли ширина раскрывающегося списка такой же, как у поля ввода. После установки значения false ширина будет рассчитываться автоматически, а производительность снизится. | логическое значение | — | истинный |
| название события | иллюстрировать | параметры обратного вызова |
|---|---|---|
| изменять | Срабатывает при изменении выбранного значения | Текущее выбранное значение |
| видимое изменение | Срабатывает, когда раскрывающийся список появляется/скрывается | True, если оно появляется, false, если оно скрыто |
| удалить тег | Срабатывает, когда тег удаляется в режиме множественного выбора | Удалено значение тега |
| прозрачный | Срабатывает, когда пользователь нажимает кнопку «Очистить» в очищаемом режиме радио. | — |
| размытие | Срабатывает, когда ввод теряет фокус | (событие: Событие) |
| сосредоточиться | Срабатывает, когда ввод получает фокус | (событие: Событие) |
| имя | иллюстрировать |
|---|---|
| — | Пользовательский шаблон, параметр: { item } |
| заголовок (1.3.0) | Содержимое вверху раскрывающегося списка |
| нижний колонтитул (1.3.0) | Содержимое внизу раскрывающегося списка |
| префикс | Выберите содержимое заголовка компонента |
| пустой | Список без вариантов |
| параметр | иллюстрировать | тип | Необязательное значение | значение по умолчанию |
|---|---|---|---|---|
| ценить | стоимость опциона | строка/число/объект | — | — |
| этикетка | Метка параметра, если она не установлена, по умолчанию равна value | строка/число | — | — |
| опции (1.2.0) | Параметры группировки | множество | — | — |
| неполноценный | Отключить ли эту опцию | логическое значение | — | ЛОЖЬ |
| имя метода | иллюстрировать | параметр |
|---|---|---|
| сосредоточиться | Сделайте ввод, получите фокус | — |
| размытие | Заставьте ввод потерять фокус и скройте раскрывающийся список. | — |
