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

Мульти-выделенный компонент может быть полезен в ситуациях, когда необходимо выбрать несколько опций из списка. Это позволяет более эффективно вводить и фильтровать данные. Компонент может быть настроен с различными свойствами для достижения различных эффектов, а также поддерживает методы и обработчики событий для большей настройки.

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

Свойства

Ручные настройки

Добавьте новые параметры или удалите параметры вручную и настройте их по одному. К числу вариантов относятся:

Свойства	Описание
Метка	Текст, отображаемый для опции
Значение	Значение, связанное с опцией
Отключено	Отключена ли опция для выбора

Сопоставленные параметры

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

Свойства	Описание
Источник данных	Задать источник данных параметров
Метка	Используйте {{item}} , чтобы установить метку параметров
Значение	Используйте {{item}} , чтобы установить значение параметров
Отключено	Используйте {{item}} , чтобы установить, отключен ли параметр для выбора

Другие свойства

Свойства	Описание
Значение по умолчанию	Начальное значение компонента. Вы можете динамически изменить начальное значение, введя JavaScript в {{}}.
Заполнитель	Значение будет показано, когда поле ввода пустое.
Метка	Имя поля, отображаемого пользователю
Подпись	Заголовок, используемый для описания поля в деталях
Скрытая метка	Выберите, показывать ли метку
Позиция	Установить положение метки относительно компонента
Выравнивание	Задать выравнивание метки
Width	Когда метка находится в левой части компонента, установите ширину метки
Обработчик событий	Триггеры запросов, управляющих компонентов или вызвать другие API в ответ на события компонента.
Отключено	Контролировать состояние отключения компонента. Компонент не может быть изменен или сфокусирован, если он отключен.
Только для чтения	Контролировать статус только для чтения. Компонент доступен только для чтения, но его нельзя изменить.
Показать кнопку “Очистить”	Показывать ли кнопку очистки
Подсказка	Пользователи могут ввести подсказку компонента здесь. Подсказка будет показана при фокусировке. Поддерживается формат Markdown.
Обязательное поле	Действителен только когда выключатель включен.
Выберите по крайней мере	Задать минимальное количество вариантов выбора
Выберите до	Установите максимальное количество вариантов выбора
Пользовательское правило	editor.inspect.setter_tooltip.custom_rule
Скрыть сообщение проверки	Вы можете скрыть сообщение об ошибке, переключившись на скрытый статус, когда введенное значение неверно. Вы можете динамически изменить скрытый статус с помощью JavaScript.
Ключ данных формы	Укажите ключ компонента оберточной формы при создании атрибута данных.
Высота	Как установить высоту для соответствия
Hidden	Динамическое управление скрытием компонента. Вы можете изменить скрытый статус через динамическое логическое значение.
Цвет темы	Чтобы выбрать цвет темы компонента

Метод

Вы можете использовать другие компоненты для управления компонентом. Мы поддерживаем следующие три метода:

setValue

Чтобы установить выбранную опцию, например, {{[”value1”,”value3”…]}}

Свойства	Описание
Значение	Массив выбранных значений параметров.

clearValue

Чтобы очистить выбранные опции

validate

Чтобы убедиться, что введенная информация является законной

очистить

Чтобы очистить сообщение проверки

Обработчик события

Мы поддерживаем прослушивание события onChange много-выделенного компонента.

Данные

Мульти-выберите компонент имеет некоторые широко используемые данные, которые можно вызвать через {{componentName.propertyName}} в приложении.

Название свойства	Описание
значение	массив выбранных значений опций

Вариант использования

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

Шаг 1 Добавить действие

Мы создали таблицу с именем selection, включая 5 колонок: options_en, options_jp, options_zh, options_kr, value. Мы храним значения опций в value и в других столбцах на разных языках.

Создайте действия для отображения всех данных в папке selection с именем postgresql1

выберите * из списка

Шаг 2 Настройка многовыбора компонента

Установить источники данных в {{postgresql1.data}}
Настройте метку для изменения метки на основе языка.
1. Используйте {{ item.columnName }} , чтобы задать столбец.
2. Используйте {{ currentUserInfo.language }} , чтобы установить язык, используемый в ILLA.
```
{{currentUserInfo.language=='ja-JP' ? item.options_jp 
: currentUserInfo.language == 'ko-KR' ? item.options_kr 
: currentUserInfo.language == 'zh-CN' ? item.options_zh 
: item.options_ru }}
```

Что еще

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