- Multi-selezione
🧬 Assembla i componenti
Multi-selezione
ContributeMulti-select
Il componente multi-select può essere utile in situazioni in cui è necessario selezionare più opzioni da un elenco. Ciò può consentire un più efficiente inserimento e filtraggio dei dati. Il componente può essere configurato con varie proprietà per ottenere effetti diversi e supporta anche metodi e gestori di eventi per una maggiore personalizzazione.
È possibile aggiungere opzioni manualmente o in blocco dalla fonte dei dati. In questo articolo, introdurremo in dettaglio come utilizzare il componente multi-selezione.
Proprietà
Opzioni manuali
Aggiungi nuove opzioni o elimina opzioni manualmente e configura le opzioni una per una. Le proprietà delle opzioni sono le seguenti:
| Proprietà | Descrizione |
|---|---|
| Etichetta | Il testo visualizzato per l’opzione |
| Valore | Il valore associato all’opzione |
| Disabilitato | Indica se l’opzione è disabilitata per la selezione |
Opzioni mappate
È inoltre possibile aggiungere opzioni da una fonte di dati mappando le proprietà dell’etichetta e del valore ai campi di dati corrispondenti. È possibile ottenere le opzioni dinamicamente dal database in questo modo. Alla fine di questo articolo, dimostreremo come usarlo attraverso un esempio.
| Proprietà | Descrizione |
|---|---|
| Fonte dei dati | Imposta la sorgente dati delle opzioni |
| Etichetta | Usa {{item}} per impostare l’etichetta delle opzioni |
| Valore | Usa {{item}} per impostare il valore delle opzioni |
| Disabilitato | Usa {{item}} per impostare se l’opzione è disabilitata per la selezione |
Altre proprietà
| Proprietà | Descrizione |
|---|---|
| Valore predefinito | Il valore iniziale del componente. È possibile modificare dinamicamente il valore iniziale digitando JavaScript in {{}}. |
| Segnaposto | Il valore verrà mostrato quando il campo di input è vuoto. |
| Etichetta | Il nome del campo visualizzato all’utente |
| Didascalia | Una didascalia utilizzata per descrivere in dettaglio il campo |
| Etichetta nascosta | Imposta se visualizzare l’etichetta |
| Posizione | Imposta la posizione dell’etichetta rispetto al componente |
| Allineamento | Imposta l’allineamento dell’etichetta |
| Width | Quando l’etichetta è sul lato sinistro del componente, impostare il rapporto di larghezza dell’etichetta |
| Gestore Eventi | Attiva interrogazioni, componenti di controllo o chiama altre API in risposta a eventi di componenti. |
| Disabilitato | Controlla lo stato se il componente è disabilitato. Il componente non può essere modificato o focalizzato quando è disabilitato. |
| Sola Lettura | Controllare lo stato se il componente è in sola lettura. Un componente di sola lettura può essere selezionato e messo a fuoco ma non può essere modificato. |
| Mostra pulsante cancella | Imposta se mostrare il pulsante cancella |
| Suggerimento | Gli utenti possono inserire il suggerimento del componente qui. Il suggerimento verrà mostrato quando è messo a fuoco. Il formato Markdown è supportato. |
| Campo obbligatorio | Valido solo quando l’interruttore è attivo. |
| Scegli almeno | Imposta il numero minimo di opzioni da scegliere |
| Scegli fino a | Imposta il numero massimo di opzioni da scegliere |
| Regola personalizzata | editor.inspect.setter_tooltip.custom_rule |
| Nascondi messaggio di convalida | È possibile nascondere il messaggio di errore cambiando lo stato nascosto quando il valore di input non è corretto. È possibile modificare dinamicamente lo stato nascosto da JavaScript. |
| Modulo Dati Chiave | Specifica una chiave di un componente di un modulo di wrapping durante la costruzione dell’attributo dati. |
| Altezza | Come impostare l’altezza per adattarsi |
| Hidden | Controllare dinamicamente se il componente è nascosto. È possibile modificare lo stato nascosto attraverso il valore booleano dinamico. |
| Colore tema | Per selezionare il colore del tema del componente |
Metodo
È possibile utilizzare altri componenti per controllare il componente. Sosteniamo i seguenti tre metodi:
setValue
Per impostare l’opzione selezionata, ad esempio, {{[”value1”,”value3”…]}}
| Proprietà | Descrizione |
|---|---|
| Valore | Un array di valori selezionati delle opzioni. |
clearValue
Per pulire le opzioni selezionate
validate
Per verificare che le informazioni di input siano legali
clearValidate
Per cancellare il messaggio di convalida
Gestore eventi
Supportiamo l’ascolto dell’evento onChange del componente multi-selezionato.
Dati
Il componente multi-select ha alcuni dati comunemente usati, che possono essere chiamati tramite {{componentName.propertyName}} nell’app.
| Nome proprietà | Descrizione |
|---|---|
| valore | un array di valori delle opzioni selezionate |
Caso di utilizzo
Successivamente, dimostreremo come utilizzare la modalità mappata per ottenere dinamicamente le opzioni.
Passo 1 Aggiungere un'azione
Abbiamo creato una tabella chiamata selection, incluse 5 colonne: options_en, options_jp, options_zh, options_kr, value. Abbiamo memorizzato i valori dell’opzione in value e memorizzato l’etichetta delle opzioni in diverse lingue in altre colonne.
Crea un’azione per elencare tutti i dati nella selection chiamata postgresql1
seleziona * dalla selezionePasso 2 Configura il componente multi-selezionato
Imposta le fonti dei dati su
{{postgresql1.data}}Configura l’etichetta per cambiare l’etichetta in base alla lingua.
- Usa {{ item.columnName }} per impostare la colonna.
- Usa {{ currentUserInfo.language }} per impostare la lingua utilizzata dagli utenti in 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 }}
Cosa c'è di più
È possibile aggiungere o eliminare le opzioni aggiungendo o eliminando le righe alla tabella di selezione.