Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue

In der Frontend-Entwicklung werden häufig kaskadierende Auswahlfelder verwendet, was nicht nur die Benutzerfreundlichkeit der Benutzereingabe erhöht, sondern auch die Menge der zwischen Frontend und Backend interagierenden Daten reduziert. In diesem Artikel wird elementUI als Beispiel verwendet. Die allgemeine Idee bei der Verwendung anderer UI-Komponenten ist dieselbe.

1. Datenbankdesign

Alle zusammengehörenden Daten können in einer Tabelle gespeichert werden, so dass die Daten nicht durch eine Hierarchie eingeschränkt sind.

Die Tabellenstruktur kann sich auf das folgende SQL zur Tabellenerstellung beziehen:

CREATE TABLE `supplies_type` (
  `id` int(11) NICHT NULL AUTO_INCREMENT,
  `category_type` varchar(64) NOT NULL COMMENT 'Kategorietyp: große Kategorie, mittlere Kategorie, kleine Kategorie',
  `big_category_name` varchar(64) NOT NULL COMMENT 'Großer Kategoriename',
  `middle_category_name` varchar(64) DEFAULT NULL COMMENT 'Name der mittleren Kategorie',
  `small_category_name` varchar(64) DEFAULT NULL COMMENT 'Kleiner Kategoriename',
  `parent_id` int(11) DEFAULT NULL,
  `create_time` Zeitstempel NULL DEFAULT CURRENT_TIMESTAMP,
  `create_user_name` varchar(64) DEFAULT NULL COMMENT 'Benutzernamen erstellen',
  `update_time` Zeitstempel NULL DEFAULT NULL BEI UPDATE CURRENT_TIMESTAMP,
  `is_deleted` tinyint(1) DEFAULT '0' COMMENT 'Ob es gelöscht ist, 1 bedeutet, dass es gelöscht ist',
  PRIMÄRSCHLÜSSEL (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

Der Screenshot der Datenbank ist in der folgenden Abbildung dargestellt. Hinweis: Um die Anzahl der Abfragen zu reduzieren, verfügt dieses System über redundante Felder. Leser können sie nach ihren Bedürfnissen anpassen.

Bildbeschreibung hier einfügen

Der Kern des Entwurfs liegt in parent_id. Unterklassen können basierend auf dem Feld parent_id abgefragt werden. Das Ergebnis ist in der folgenden Abbildung dargestellt:

Bildbeschreibung hier einfügen

Bildbeschreibung hier einfügen

2. Frontend-Seite

Der Front-End-Seiteneffekt ist wie folgt:

Bildbeschreibung hier einfügen

Der HTML-Code lautet wie folgt:

<div Klasse="App-Container">
    <span style="margin-left:120px;margin-right: 20px;width: 150px;display: inline-block;">Hauptkategorien:</span>
    <el-select v-model="big" placeholder="Bitte auswählen" @change="getSuppliesType(big)" style="width: 19%;">
      <el-Option
        v-for="Element in großen Typen"
        :Schlüssel="Artikel.großerKategoriename"
        :label="Artikel.großerKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <span style="margin-left:120px;margin-right: 20px; width: 150px;display: inline-block;">Mittlere Kategorie:</span>
    <el-select v-model="middle" placeholder="Bitte auswählen" @change="getSuppliesType(middle)" style="width: 19%;">
      <el-Option
        v-for="Element in mittleren Typen"
        :Schlüssel="Artikel.mittlererKategoriename"
        :label="Artikel.mittlererKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <br>
    <br>
    <br>
    <span style="margin-left:120px;margin-right: 20px;width: 150px; margin-top:20px; display: inline-block;">Unterkategorie:</span>
    <el-select v-model="small" placeholder="Bitte wählen" style="width: 19%;">
      <el-Option
        v-for="Element in kleinen Typen"
        :Schlüssel="Artikel.smallCategoryName"
        :label="Artikel.kleinerKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
</div>

Die obigen Daten item.smallCategoryName und item.smallCategoryName sind die Daten (Camel Case-Namensgebung), die vom Backend aus der Datenbank abgefragt werden. Das Backend ist nur für die Abfrage und Rückgabe der Ergebnisse verantwortlich.

Die Datendefinition in Vue lautet wie folgt:

Daten() {
    zurückkehren {
        groß: '',
        großeTypen: null,
        Mitte: '',
        mittlereTypen: null,
        klein: '',
        smallTypes: null
    }
},

Beim Initialisieren der Seite wird die Kategorienliste automatisch abgerufen:

erstellt() {
		this.getSuppliesType(0)
},

Die Methode getSuppliesType auf der Seite lautet wie folgt:

getSuppliesType(id) {
  this.listLoading = wahr
  const queryData = {
    übergeordneteID: ID
  }
  //Der Aufruf der Backend-Schnittstelle kann hier entsprechend Ihrer eigenen Aufrufmethode geschrieben werden //Der getSuppliersType ist hier die Methode im Util, die im Projekt gekapselt ist //Wenn die Anforderungsmethode „Post“ ist, JSON.stringify(queryData)
  //Wenn die Anforderungsmethode get ist, queryData
  getSuppliersType(JSON.stringify(queryData)).then(response => {
    console.log(Antwort)
    Konsole.log(Antwort.Daten[0].Kategorietyp)
    //Den drei Dropdown-Feldern automatisch Werte entsprechend dem Typ zuweisen if (response.data[0].categoryType === 'BIG') {
      dies.bigTypes = antwort.daten
    } sonst wenn (response.data[0].categoryType === 'MIDDLE') {
      this.middleTypes = Antwort.Daten
    } anders {
      diese.smallTypes = Antwort.Daten
    }
    this.listLoading = falsch
  }).catch(Funktion (Fehler) {
    console.log(Fehler)
    this.listLoading = falsch
  })
},

3. Eine vollständige Demo

Die folgende Seite ist der vollständige Code. Die darin enthaltenen Daten sind Teildaten und die Hintergrundschnittstelle wird mithilfe von JS abgerufen.

<Vorlage>
  <div Klasse="App-Container">
    <span style="margin-left:120px;margin-right: 20px;width: 150px;display: inline-block;">Hauptkategorien:</span>
    <el-select v-model="big" placeholder="Bitte auswählen" @change="getSuppliesType(big)" style="width: 19%;">
      <el-Option
        v-for="Element in großen Typen"
        :Schlüssel="Artikel.großerKategoriename"
        :label="Artikel.großerKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <span style="margin-left:120px;margin-right: 20px; width: 150px;display: inline-block;">Mittlere Kategorie:</span>
    <el-select v-model="middle" placeholder="Bitte auswählen" @change="getSuppliesType(middle)" style="width: 19%;">
      <el-Option
        v-for="Element in mittleren Typen"
        :Schlüssel="Artikel.mittlererKategoriename"
        :label="Artikel.mittlererKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <br>
    <br>
    <br>
    <span style="margin-left:120px;margin-right: 20px;width: 150px; margin-top:20px; display: inline-block;">Unterkategorie:</span>
    <el-select v-model="small" placeholder="Bitte auswählen" style="width: 19%;">
      <el-Option
        v-for="Element in kleinen Typen"
        :Schlüssel="Artikel.smallCategoryName"
        :label="Artikel.kleinerKategoriename"
        :Wert="Artikel-ID">
      </el-Option>
    </el-Auswahl>
    <br>
    <br>
    <br>
    <el-button type="primary" round style="margin-left:280px" @click.native.prevent="commit">Hinzufügen</el-button>
    <el-button type="primary" round style="margin-left:100px" @click.native.prevent="cancel">Abbrechen</el-button>
  </div>
</Vorlage>

<Skript>
    Standard exportieren {
        Filter:
            parseTime(Zeitstempel) {
                returniere parseTime(Zeitstempel, null)
            }
        },
        Daten() {
            zurückkehren {
                groß: '',
                großeTypen: null,
                Mitte: '',
                mittlereTypen: null,
                klein: '',
                kleineTypen: null,
                Datenliste: [
                    {"id":1,"categoryType":"BIG","bigCategoryName":"1. Site-Management und Sicherheit","middleCategoryName":null,"smallCategoryName":null,"parentId":0,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":"2021-07-04T13:34:31.000+0000","isDeleted":false},
                    {"id":27,"categoryType":"BIG","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":null,"smallCategoryName":null,"parentId":0,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":2,"categoryType":"MIDDLE","bigCategoryName":"1. Site-Management und Sicherheit","middleCategoryName":"1.1 Site-Überwachung","smallCategoryName":null,"parentId":1,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":10,"categoryType":"MIDDLE","bigCategoryName":"1. Site-Management und Sicherheit","middleCategoryName":"1.2 Site-Sicherheit","smallCategoryName":null,"parentId":1,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":3,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.1 Meteorologische Überwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":4,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.2 Erdbebenüberwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":5,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.3 Überwachung geologischer Gefahren","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":6,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.4 Hydrologische Überwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":7,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.5 Umweltüberwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":8,"categoryType":"SMALL","bigCategoryName":"1. Vor-Ort-Management und Garantie","middleCategoryName":"1.1 Vor-Ort-Überwachung","smallCategoryName":"1.1.6 Krankheitsüberwachung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":9,"categoryType":"SMALL","bigCategoryName":"1. Standortverwaltung und Sicherheit","middleCategoryName":"1.1 Standortüberwachung","smallCategoryName":"1.1.7 Beobachtung und Messung","parentId":2,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":11,"categoryType":"SMALL","bigCategoryName":"1. Site Management und Sicherheit","middleCategoryName":"1.2 Site Sicherheit","smallCategoryName":"1.2.1 Site Beleuchtung","parentId":10,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":12,"categoryType":"SMALL","bigCategoryName":"1. Site-Management und Sicherheit","middleCategoryName":"1.2 Site-Sicherheit","smallCategoryName":"1.2.2 Site-Alarm","parentId":10,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":28,"categoryType":"MIDDLE","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":null,"parentId":27,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":34,"categoryType":"MIDDLE","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Lebenssuche und -rettung","smallCategoryName":null,"parentId":27,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":"2021-07-04T13:03:23.000+0000","isDeleted":false},
                    {"id":29,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.1 Gesundheit und Seuchenprävention","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":30,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.2 Brandschutz","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":31,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.3 Chemie und Strahlung","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":32,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.4 Sturzprävention","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":33,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.1 Personenschutz","smallCategoryName":"2.1.5 Allgemeiner Schutz","parentId":28,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":35,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Lebenssuche und -rettung","smallCategoryName":"2.2.1 Lebenssuche","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":36,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Suche und Rettung von Menschenleben","smallCategoryName":"2.2.2 Rettung beim Klettern","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":37,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Suche und Rettung von Menschenleben","smallCategoryName":"2.2.3 Abbruch- und Hebearbeiten","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":38,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Lebenssuche und -rettung","smallCategoryName":"2.2.4 Unterwasserrettung","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false},
                    {"id":39,"categoryType":"SMALL","bigCategoryName":"2. Lebensrettung und Lebenshilfe","middleCategoryName":"2.2 Suche und Rettung von Leben","smallCategoryName":"2.2.5 Allgemeine Werkzeuge","parentId":34,"createTime":"2021-07-04T11:13:36.000+0000","createUserName":null,"updateTime":null,"isDeleted":false}
                    ]
            }
        },
        erstellt() {
            this.getSuppliesType(0)
        },
        Methoden: {
            getSuppliesType(id) {
                const queryData = {
                    übergeordneteID: ID
                }
                //Dies ist eine JS-Simulation. Die Erfassung realer Daten erfordert außerdem die Unterstützung der Backend-Schnittstelle getSuppliersType(JSON.stringify(queryData)).then(response => {
                    console.log(Antwort)
                    Konsole.log(Antwort.Daten[0].Kategorietyp)
                    //Speichern Sie die Abfrageergebnisse let tmpList = []
                    diese.dataList.forEach((item, index) => {
                        wenn(item.parentId === id){
                            tmpList.push(Element)
                        }
                    })
                    wenn (tmpList[0].categoryType === 'BIG') {
                        this.bigTypes = temporäreListe
                    } sonst wenn (response.data[0].categoryType === 'MIDDLE') {
                        this.middleTypes = temporäreListe
                    } anders {
                        this.smallTypes = temporäreListe
                    }
                }).catch(Funktion (Fehler) {
                    console.log(Fehler)
                })
            },
            begehen() {
                console.log("Senden-Button angeklickt")
            },
            stornieren() {
                dies.$router.go(-1)
            }
        }
    }
</Skript>

Es liegt wieder unterhalb der Trennlinie, und dieser Artikel endet hier. Der Inhalt dieses Artikels wird vom Blogger selbst sortiert und in Kombination mit seinem eigenen Verständnis zusammengefasst

Dies ist das Ende dieses Artikels über das Design und die Implementierung der kaskadierenden Dropdown-Box von Vue. Weitere relevante Inhalte zur kaskadierenden Dropdown-Box von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Beispiel für eine kaskadierende Dropdown-Box in Vue.js 2.0 auswählen

<<:  Installation und Verwendung der Ubuntu 18.04 Serverversion (Bild und Text)

>>:  Detaillierte Erläuterung der Konzepte, Prinzipien und allgemeinen Verwendung von gespeicherten MySQL-Prozeduren

Artikel empfehlen

Praxis der Verwendung von Tinymce Rich Text zum Anpassen von Symbolleistenschaltflächen in Vue

Inhaltsverzeichnis Installieren Sie die Deklarati...

Responsive Webdesign lernen (3) - So verbessern Sie die Leistung von Webseiten auf Mobilgeräten

Vorwort Aufgrund von Bandbreitenbeschränkungen un...

So installieren Sie eine ISO-Datei im Linux-System

Wie installiere ich ISO-Dateien unter einem Linux...

CentOS 8.0.1905 installiert ZABBIX Version 4.4 (verifiziert)

Zabbix Server-Umgebungsplattform Version: ZABBIX ...

Detaillierte Erläuterung der durch schwebende Elemente verursachten Probleme und Lösungen

1. Problem Mehrere schwebende Elemente können die...

js, um den Popup-Effekt zu erzielen

In diesem Artikelbeispiel wird der spezifische Co...

Die am häufigsten verwendete HTML-Escape-Sequenz

In HTML haben <, >, & usw. eine speziell...

So geben Sie Parametervariablen extern im Docker an

In diesem Artikel wird hauptsächlich erläutert, w...

Verwenden Sie CSS3, um den Code für dynamische Spezialeffekte beim Hovern von Schaltflächen zu implementieren

Wir haben vorgestellt, wie man mit den CSS3-Spalt...

So installieren Sie Docker auf CentOS

Hier stellen wir nur die relativ einfache Install...

Beispielcode zum Anzeigen einer Bildlaufleiste nach dem Verkleinern der HTML-Seite

Hier erfahren Sie, wie Sie nach der Verkleinerung...

Einfacher CSS-Textanimationseffekt

Ergebnisse erzielen Implementierungscode html <...

Lösung für zu große Mysql-Binlog-Protokolldateien

Inhaltsverzeichnis 1. Verwandte Binlog-Konfigurat...

JavaScript implementiert Ziehen mit der Maus, um die Div-Größe anzupassen

In diesem Artikel wird der spezifische JavaScript...

Detaillierte Analyse der MySQL-Indexdatenstruktur

Inhaltsverzeichnis Überblick Indexdatenstruktur B...