- Sélection multiple
🧬 Assembler des composants
Sélection multiple
ContributeSélection multiple
Le composant à sélection multiple peut être utile dans les situations où plusieurs options doivent être sélectionnées dans une liste. Cela peut permettre une saisie et un filtrage plus efficaces des données. Le composant peut être configuré avec différentes propriétés pour obtenir différents effets et supporte également les méthodes et les gestionnaires d’événements pour plus de personnalisation.
Vous pouvez ajouter des options manuellement ou en vrac à partir de votre source de données. Dans cet article, nous présenterons en détail comment utiliser le composant multi-sélection.
Propriétés
Options manuelles
Ajoutez de nouvelles options ou supprimez manuellement les options et configurez les options une par une. Les propriétés des options sont les suivantes :
| Propriétés | Libellé |
|---|---|
| Étiquette | Le texte affiché pour l’option |
| Valeur | La valeur associée à l’option |
| Désactivé | Si l’option est désactivée pour la sélection |
Options de mappage
Vous pouvez également ajouter des options à partir d’une source de données en associant les propriétés d’étiquette et de valeur aux champs de données correspondants. Vous pouvez ainsi obtenir des options dynamiquement à partir de la base de données. À la fin de cet article, nous montrerons comment l’utiliser par le biais d’un exemple.
| Propriétés | Libellé |
|---|---|
| Source de données | Définir la source de données des options |
| Étiquette | Utilisez {{item}} pour définir l’étiquette des options |
| Valeur | Utilisez {{item}} pour définir la valeur des options |
| Désactivé | Utilisez {{item}} pour définir si l’option est désactivée pour la sélection |
Autres propriétés
| Propriétés | Libellé |
|---|---|
| Valeur par défaut | La valeur initiale du composant. Vous pouvez modifier dynamiquement la valeur initiale en tapant JavaScript dans {{}}. |
| Placeholder | La valeur sera affichée lorsque le champ de saisie est vide. |
| Étiquette | Le nom du champ affiché à l’utilisateur |
| Légende | Une légende utilisée pour décrire le champ en détail |
| Libellé masqué | Définir si le libellé doit être affiché |
| Position | Définir la position de l’étiquette par rapport au composant |
| Alignement | Définir l’alignement du libellé |
| Width | Lorsque l’étiquette est sur le côté gauche du composant, définissez le rapport de largeur de l’étiquette |
| Gestionnaire d’événements | Déclencher des requêtes, contrôler des composants ou appeler d’autres APIs en réponse aux événements des composants. |
| Désactivé | Contrôle l’état de la désactivation du composant. Le composant ne peut pas être modifié ou concentré lorsqu’il est désactivé. |
| Lecture seule | Contrôle l’état du composant en lecture seule. Un composant en lecture seule peut être sélectionné et concentré mais ne peut pas être modifié. |
| Afficher le bouton de nettoyage | Définir si le bouton d’effacement doit être affiché |
| Info-bulle | Les utilisateurs peuvent entrer l’infobulle du composant ici. L’infobulle s’affichera quand elle sera mise au point. Le format Markdown est pris en charge. |
| Champ obligatoire | Valable uniquement lorsque le commutateur est allumé. |
| Choisissez au moins | Définir le nombre minimum d’options à choisir |
| Choisir jusqu’à | Définir le nombre maximum d’options à choisir |
| Règle personnalisée | Inspecter la règle personnalisée |
| Masquer le message de validation | Vous pouvez masquer le message d’erreur en changeant l’état caché lorsque la valeur d’entrée est incorrecte. Vous pouvez modifier dynamiquement le statut caché par JavaScript. |
| Clé de données du formulaire | Spécifie une clé d’un composant de formulaire d’emballage lors de la construction de l’attribut de données. |
| Hauteur | Comment définir la hauteur à ajuster |
| Hidden | Contrôle dynamiquement si le composant est caché. Vous pouvez changer le statut caché par la valeur booléenne dynamique. |
| Couleur du thème | Pour sélectionner la couleur du thème du composant |
Méthode
Vous pouvez utiliser d’autres composants pour contrôler le composant. Nous soutenons les trois méthodes suivantes:
définirValeur
Pour définir l’option sélectionnée, par exemple, {{[”value1”,”value3”…]}}
| Propriétés | Libellé |
|---|---|
| Valeur | Un tableau de valeurs d’options sélectionnées. |
effacer la valeur
Effacer les options sélectionnées
validate
Vérifier que les informations saisies sont légales
clearValider
Effacer le message de validation
Gestionnaire d'événements
Nous supportons l’écoute de l’événement onChange du composant multi-sélection.
Info-bulle
Le composant multi-sélection a des données couramment utilisées, qui peuvent être appelées via {{componentName.propertyName}} dans l’application.
| Nom de la propriété | Libellé |
|---|---|
| valeur | un tableau de valeurs d’options sélectionnées |
Cas d'utilisation
Ensuite, nous montrerons comment utiliser le mode mappé pour obtenir dynamiquement des options.
Étape 1 Ajouter une action
Nous avons créé une table nommée selection, incluant 5 colonnes: options_en, options_jp, options_zh, options_kr, value. Nous avons stocké les valeurs d’options dans value et stocké l’étiquette d’options dans différentes langues dans d’autres colonnes.
Créez une action pour lister toutes les données dans selection nommé postgresql1
sélectionner * dans la sélectionÉtape 2 Configurer le composant à sélection multiple
Définissez les sources de données à
{{postgresql1.data}}Configurez l’étiquette pour changer l’étiquette en fonction de la langue.
- Utilisez {{ item.columnName }} pour définir la colonne.
- Utilisez {{ currentUserInfo.language }} pour définir la langue utilisée par les utilisateurs en ILLA.
{{currentUserInfo.language=='ja-JP' ? item.options_jp : currentUserInfo.language == 'ko-KR' ? item.options_kr : currentUserInfo.language == 'zh-CN' ? item.options_zh : item.options_en }}
Quoi de plus
Vous pouvez ajouter ou supprimer des options en ajoutant ou en supprimant des lignes à la table de sélection.