Cascader

​

Ένας cascader είναι ένας τύπος στοιχείου εισόδου που επιτρέπει στους χρήστες να επιλέξουν ιεραρχικά δεδομένα, όπως μια κατηγορία ή υποκατηγορία από ένα αναπτυσσόμενο μενού. Όταν ένας χρήστης επιλέγει μια επιλογή από το αναπτυσσόμενο μενού, ο Cascader θα ενημερώσει αυτόματα για να εμφανίσει τις σχετικές υποκατηγορίες ή επιλογές σε ένα ένθετο αναπτυσσόμενο μενού.

Για παράδειγμα, αν έχετε ένα στοιχείο εισόδου cascader για την επιλογή μιας κατηγορίας προϊόντων, το πρώτο αναπτυσσόμενο μενού μπορεί να δείξει όλες τις διαθέσιμες κατηγορίες, όπως “Ηλεκτρονικά”, “Ρούχα”, και “Βιβλία”. Όταν ένας χρήστης επιλέξει “Electronic,” ο Cascader θα ενημερώσει για να εμφανίσει τις υποκατηγορίες ηλεκτρονικών, όπως “Τηλέφωνα”, “Laptops” και “Tablets”. Αυτό επιτρέπει στους χρήστες να περιηγηθείτε γρήγορα και εύκολα μέσα από ιεραρχικά δεδομένα και να επιλέξετε την επιλογή που χρειάζονται.

​

Ιδιότητες

Διαθέσιμες ιδιότητες Cascader. Η JavaScript μπορεί να γραφτεί για να διαβάσει ή να τροποποιήσει πληροφορίες σχετικά με τα στοιχεία.

​

Μέθοδοι

Μπορείτε να χρησιμοποιήσετε άλλα στοιχεία για τον έλεγχο της εφαρμογής. Υποστηρίζουμε τις ακόλουθες δύο μεθόδους:

• ορισμός

Για να ορίσετε την επιλεγμένη επιλογή, για παράδειγμα, {{”value1”}}

• καθαρή αξία

Για να καθαρίσετε την τιμή του επιλεγμένου στοιχείου

Παράδειγμα Χρήσης:

Το στοιχείο Cascader υποστηρίζει την ακρόαση της εκδήλωσης onChange άλλων στοιχείων χρησιμοποιώντας το ενσωματωμένο σύστημα γεγονότων. Ρυθμίστε το ακολουθώντας τα παρακάτω βήματα:

1. Προσθέστε μια σκανδάλη συμβάντος στο στοιχείο που θέλετε να ακούσετε. Για παράδειγμα, αν θέλετε να ακούσετε το onChange event of a Radio Group component, θα προσθέσεις μια σκανδάλη συμβάντος σε αυτό το στοιχείο της ομάδας ραδιοφώνου.
2. Στο χειριστή συμβάντων επεξεργασίας, επιλέξτε Control component εν ενεργεία, επιλέξτε το στοιχείο Cascader που θέλετε να ενημερώσετε ως στόχο της εκδήλωσης.
3. Επιλέξτε την ενέργεια SetValue και επιλέξτε την κατάλληλη τιμή για το στοιχείο Cascader. Αυτή θα είναι η τιμή που θα έχει και θα ενημερώνει το στοιχείο Cascader όταν ενεργοποιείται το γεγονός.
4. Αποθηκεύστε τις ρυθμίσεις ενεργοποίησης του συμβάντος και επαναλάβετε τη διαδικασία για οποιαδήποτε άλλα στοιχεία θέλετε να ακούσετε.

Μόλις ρυθμίσετε την ενεργοποίηση του γεγονότος, το στοιχείο εισόδου Cascader θα ενημερώνεται αυτόματα κάθε φορά που το συμβάν του onChange ενεργοποιείται στα άλλα στοιχεία. Αυτό σας επιτρέπει να δημιουργήσετε δυναμικές διεπαφές που ανταποκρίνονται στην είσοδο του χρήστη σε πραγματικό χρόνο, καθιστώντας ευκολότερη την πλοήγηση και την αλληλεπίδραση των χρηστών με την εφαρμογή σας.

​

Χειριστής συμβάντων

​

Δεδομένα

Το στοιχείο έχει κάποια κοινώς χρησιμοποιούμενα δεδομένα, τα οποία μπορούν να κληθούν μέσω του {{componentName.propertyName}} στην εφαρμογή.

Παράδειγμα: {{cascader1.value[0]}

​

Περίπτωση χρήσης

Στη συνέχεια, θα δείξουμε πώς να χαρτογραφήσουμε τα δεδομένα από την πηγή δεδομένων σε επιλογές σε cascader δυναμικά.

​

Βήμα 1 Προσθέστε μια ενέργεια

Ας δημιουργήσουμε έναν πίνακα στην Supabase που ονομάζεται project, καθώς και έναν υποπίνακα που ονομάζεται θεραπευτής και οι οποίοι είναι ευθυγραμμισμένοι με project_id.

Στη συνέχεια, μπορούμε να δημιουργήσουμε μια νέα δράση για Supabase από τη λίστα ενεργειών, λίστα όλων των δεδομένων στο έργο και ονομάζεται 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/)

​

Βήμα 2 Μετασχηματισμός των δεδομένων

Στη συνέχεια, μπορούμε enable το transformer τμήμα κάτω από την ενότητα επιλογή. Μέσα στην περιοχή κειμένου, μπορούμε να συλλάβουμε μόνο τις τιμές και τις ετικέτες που χρειαζόμαστε από τα δεδομένα και να τα μεταμορφώσουμε σε επιλογές φιλικές προς τον καταρράκτη χρησιμοποιώντας JavaScript.

const transformedArray = data.reduce((acc, current) => ◆
  const existing = acc.find(item) => item.value ==== τρέχων. roject_id);
  εάν (έξω) {
    const θεραπευτής = { value: current.therapist_id, label: current.therapist_name };
    υπάρχει. hildren.push(therapist);
  } else {
    const project = value. value: current. roject_id, label: 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;

Η τελική ενέργεια θα πρέπει να εμφανίζεται η ίδια με την

Πατήστε Save και Run για να ενεργοποιήσετε αυτήν την ενέργεια.

​

Βήμα 3 Διαμόρφωση του εξαρτήματος

Αφού σύρουμε ένα στοιχείο cascader στον καμβά, μπορούμε να κάνουμε μονό κλικ για να ρυθμίσουμε την πηγή δεδομένων στο {{supabasedb1.data}}

Προαιρετικά: Εδώ ορίζουμε μια προεπιλεγμένη τιμή του {{['a', '1']}} για τις αντίστοιχες ετικέτες {{['Psychotherapy'], ['James']}}.