ElementUI implementiert kaskadierenden Selektor

ElementUI implementiert kaskadierenden Selektor

In diesem Artikelbeispiel wird der spezifische Code von elementUI zur Implementierung des Kaskadenselektors zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Rufen Sie die Schnittstelle vom Backend auf und übergeben Sie die Daten an das Frontend

2. Verwenden Sie VUE-Code, um kaskadierende Optionen anzuzeigen

<el-Kaskade
        :disabled="istDeaktiviert"
        :props="Standardparameter"
        :Optionen="Optionen"
        v-Modell="ausgewählteOptionen"
        :alle-Ebenen-anzeigen="false"
        filterbar
        :löschbar="wahr"
      ></el-cascader>

3. JS definieren

Daten() {
   Optionen: [],
      ausgewählteOptionen: [],
      Standardparameter: {
        Bezeichnung: "Name",
        Wert: "Code",
        Kinder: "Kinder",
      },
},
erstellt() {
 listArea(330000).dann((Antwort) => {
       console.log(Antwort);
       diese.Optionen = diese.getTreeData(Antwort);
       dies.laden = falsch;
     });
},
Methoden: {
 // Leere Arrays rekursiv eliminieren getTreeData(data) {
      // Schleife durch JSON-Daten für (var i = 0; i < data.length; i++) {
        wenn (Daten[i].Kinder.Länge < 1) {
          //Wenn children ein leeres Array ist, setze children auf undefiniert
          Daten[i].Kinder = undefiniert;
        } anders {
          // Wenn „children“ kein leeres Array ist, rufen Sie diese Methode weiterhin rekursiv auf. this.getTreeData(data[i].children);
        }
      }
      Daten zurückgeben;
    }
}

4. Der Anzeigeeffekt ist wie folgt

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Praxis des El-Cascader-Kaskadenselektors in ElementUI
  • Lösung für den Kaskadenselektor-Fehler in Vue+ElementUI

<<:  So verwenden Sie IDEA, um ein Webprojekt zu erstellen und es auf Tomcat zu veröffentlichen

>>:  Warum der Speicherplatz nach dem Löschen von Daten in MySQL nicht freigegeben wird

Artikel empfehlen

Detaillierte Erklärung zum Upgrade von Softwarepaketversionen unter Linux

Im Linux-Umfeld möchten Sie prüfen, ob eine besti...

6 Möglichkeiten, die von Linux-Prozessen belegten Portnummern anzuzeigen

Für Linux-Systemadministratoren ist es von entsch...

MySQL Server IO 100 % Analyse- und Optimierungslösung

Vorwort Während des Stresstests besteht das unmit...

Linux-Installation MySQL5.6.24 Nutzungsanweisungen

Hinweise zur Linux-Installation von MySQL 1. Stel...

Welcher Befehl eignet sich besser für die unscharfe Suche nach Dateien in Linux?

1. Einleitung In diesem Artikel wird hauptsächlic...

Eine kleine Sammlung von HTML-Meta-Tags

<Head>……</head> gibt den Dateikopf vo...

Lösung für das Root-Passwort-Anmeldeproblem in MySQL 5.7

Nachdem ich herausgefunden hatte, dass der vorher...

Verwendungsanweisungen für den Befehl „Docker Create“

Mit dem Befehl „Docker Create“ können Sie einen C...

Geplantes Teilen von Skripten für MySQL-Datenbanksicherungen

BackUpMysql.sh-Skript #!/bin/bash PATH=/bin:/sbin...