Cascader

​

Un cascader è un tipo di componente di input che consente agli utenti di selezionare dati gerarchici, come una categoria o sottocategoria da un menu a discesa. Quando un utente seleziona un’opzione dal menu a discesa, il cascader si aggiornerà automaticamente per mostrare le relative sottocategorie o opzioni in un menu a discesa annidato.

Ad esempio, se si dispone di un componente di input cascader per selezionare una categoria di prodotto, il primo menu a discesa può mostrare tutte le categorie disponibili, come “Electronics”, “Abbigliamento” e “Libri”. Quando un utente seleziona “Electronics”, la cascata si aggiornerà per mostrare le sottocategorie di elettronica, come “Phones”, “Laptops”, e “Tablets”. Ciò consente agli utenti di navigare rapidamente e facilmente attraverso i dati gerarchici e selezionare l’opzione di cui hanno bisogno.

​

Proprietà

Proprietà disponibili di Cascader. JavaScript può essere scritto per leggere o modificare informazioni sui componenti.

​

Metodi

È possibile utilizzare altri componenti per controllare il componente. Sosteniamo i due metodi seguenti:

• setValue

Per impostare l’opzione selezionata, ad esempio, {{”value1”}}

• clearValue

Per cancellare il valore del componente selezionato

Esempio Di Utilizzo:

Il componente Cascader supporta l’ascolto dell’evento onChange di altri componenti utilizzando il sistema di eventi integrato. Impostalo seguendo questi passaggi di esempio:

1. Aggiungi un trigger di evento al componente che vuoi ascoltare. Ad esempio, se vuoi ascoltare l’evento onChange di un componente di un gruppo radio, si aggiungerebbe un trigger di evento a quel componente di gruppo radio.
2. Nel gestore degli eventi di Modifica, seleziona Componente di controllo in azione, seleziona il componente Cascader che vuoi aggiornare come obiettivo dell’evento.
3. Scegli l’azione SetValue e seleziona il valore appropriato per il componente Cascader. Questo sarà il valore che il componente Cascader ha e verrà aggiornato quando l’evento viene attivato.
4. Salva le impostazioni di attivazione dell’evento e ripeti il processo per qualsiasi altro componente che desideri ascoltare.

Dopo aver impostato i trigger dell’evento, il componente di ingresso Cascader si aggiornerà automaticamente ogni volta che l’evento onChange viene attivato sugli altri componenti. Questo consente di creare interfacce dinamiche che rispondono all’input dell’utente in tempo reale, rendendo più facile per gli utenti la navigazione e l’interazione con la tua applicazione.

​

Gestore eventi

​

Dati

Il componente ha alcuni dati comunemente usati, che possono essere chiamati tramite {{componentName.propertyName}} nell’app.

Esempio: {{cascader1.value[0]}

​

Caso di utilizzo

Successivamente, dimostreremo come mappare i dati dalla sorgente dati alle opzioni nella cascader dinamicamente.

​

Passo 1 Aggiungere un'azione

Creiamo una tabella in Supabase chiamata project, e una sottotabella chiamata therapist allineata da project_id.

Quindi possiamo creare una nuova azione per Supabase dall’elenco delle azioni, elencando tutti i dati nel progetto e chiamato supabasedb1

SELECT [project.id](http://project.id/) as project_id, [therapist.name](http://therapist.name/) as therapist_name from therapist join project on therapist.project_id = [project.id](http://project.id/)

​

Fase 2 Trasforma i dati

Successivamente, possiamo enable la sezione transformer sotto la sezione Seleziona. All’interno dell’area di testo, possiamo catturare solo i valori e le etichette di cui abbiamo bisogno dai dati e trasformarli in opzioni cascader-friendly utilizzando JavaScript.

const transformedArray = data.reduce((acc, current) => {
  const existing = acc.find((item) => item.value === current. roject_id);
  if (existing) {
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    existing. hildren.push(therapist);
  } else {
    const project = { value: current. roject_id, etichetta: current.project_name, children: [] };
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    project.children. ush(therapist);
    acc.push(project);
  }
  return acc;
}, []);

return transformedArray;

L’azione finale deve essere visualizzata come

Clicca su Salva e Esegui per attivare questa azione.

​

Passo 3 Configura il componente

Dopo aver trascinato un componente cascader sulla tela, possiamo fare clic per configurare la sua sorgente dati in {{supabasedb1.data}}

Opzionale: qui abbiamo impostato un valore predefinito di {{['a', '1']}} per le corrispondenti {{['Psychotherapy'], ['James']}} etichette.