Vue implementiert den Beispielcode zum Hinzufügen, Löschen, Ändern und Überprüfen der Baumstruktur

Vue implementiert den Beispielcode zum Hinzufügen, Löschen, Ändern und Überprüfen der Baumstruktur

Tatsächlich haben viele Unternehmen ähnliche Funktionen wie der Benutzerberechtigungsbaum. Ich habe erst kürzlich eine Baumstruktur mit Hinzufügungen, Löschungen und Änderungen geschrieben. Ich möchte sie hier mit Ihnen teilen. Wenn etwas Unvernünftiges dabei ist, kommentieren Sie es bitte und ich werde es so schnell wie möglich optimieren. Fügen Sie zuerst das Effektbild an.

Dies ist der Fall, wenn nicht auf Bearbeiten geklickt wird. Die Produktanforderung besteht darin, einen Knoten auszuwählen und die dem Knoten entsprechenden Gerätedaten abzurufen. Daher sieht die Startseite wie folgt aus.

Bildbeschreibung hier einfügen

Dies ist die Schaltfläche zum Bearbeiten des Knotens, die nach dem Klicken auf Bearbeiten angezeigt wird.

Bildbeschreibung hier einfügen

Klicken Sie auf die obere Schaltfläche „Hinzufügen“, um den Bildschirm „Hinzufügen“ des äußersten übergeordneten Knotens anzuzeigen.

Bildbeschreibung hier einfügen

Ändern des Knotennamens

Bildbeschreibung hier einfügen

Da unsere Anforderungen zwei Zustände sind: Bearbeiten und Nichtbearbeiten, habe ich zwei Baumkomponenten verwendet und sie über v-if gesteuert. (v-if: die Komponente existiert nicht, v-show: die Komponente nimmt Platz ein, wird aber nicht angezeigt)

<el-Baum
    v-if="treeSetData.editFlg"
     ref="Baum"
     :Schlüssel="treeSetData.tree_key"
     :data="BaumDatenSatz.BaumDaten"
     Knotenschlüssel="id"
     :render-content="Renderinhalt"
     :Erweitern beim Klicken auf Knoten="false"
     :default-expand-all="treeSetData.defaultExpandAll"
     Highlight-aktuell
     @node-click="Klick auf Knoten handhaben"
     Klasse = "Baumstil"
 ></el-Baum>
 <el-Baum
     v-sonst
     ref="Baum"
     :Schlüssel="treeSetData.tree_key"
     :data="BaumDatenSatz.BaumDaten"
     Knotenschlüssel="id"
     :render-content="Renderinhalt"
     :Erweitern beim Klicken auf Knoten="false"
     :default-expand-all="treeSetData.defaultExpandAll"
     Highlight-aktuell
     Klasse = "Baumstil"
 ></el-Baum>

Auf die Felder der Baumkomponente werde ich nicht näher eingehen. Sie können sie auf der offiziellen Website der Element-UI-Baumkomponente anzeigen. Die folgenden Methoden werde ich jedoch separat erläutern.

  • Render-Inhalt: benutzerdefinierter Knoteninhalt, RenderContent: ist der Methodenname.
  • @node-click: Wird aufgerufen, wenn auf einen Knoten geklickt wird. Da der Knotenklickeffekt nur im nicht bearbeiteten Zustand existiert, habe ich diese Methode nur in der nicht bearbeiteten Baumkomponente geschrieben.

Beschreibung der erforderlichen Daten

// Für die Baumstruktur benötigte DatentreeSetData:{
  defaultExpandAll:true, // Ob standardmäßig erweitert werden soll editFlg:true, // Ob es sich im Bearbeitungszustand befindet treeData: [], // Baumkomponentendatensatz // Inhalt des Baumarrays bearbeiten editList:[],
  // Lösche den Inhalt des Baumdatenarrays deleteList:[],
  // Inhalt des Baumdaten-Arrays hinzufügen addList:[],
  // Ob flg hinzugefügt werden soll
  addNodeFlg:false,
  //Standard-ID
  Standard-ID: 5000,
  // Neu hinzugefügter äußerster Knotenname newName:'',
  Baumschlüssel: 0,
},

Lassen Sie mich erklären, wie der äußerste Knoten hinzugefügt wird. Tatsächlich besteht die Kernidee darin, die Anzeige des Eingabefelds und der Schaltfläche darunter zu steuern und dann nach dem Klicken auf die Bestätigungsschaltfläche den ursprünglichen Baumkomponentendaten neue Daten hinzuzufügen.

Realisierungsbildschirm

Bildbeschreibung hier einfügen

HTML-Code für Schaltfläche hinzufügen

<el-button type="text" @click="add_new_Area" class="button-style"><i class="el-icon-plus" style="margin-right:5px"></i>Hinzufügen</el-button>

Methode zum Klicken auf eine Schaltfläche hinzufügen [add_new_Area]

füge neuen Bereich hinzu() {
      this.treeSetData.addNodeFlg = true;
    },

Codeausschnitt für Textbox

<el-row Klasse="add_question" v-show="treeSetData.addNodeFlg">
    <el-col :span="11" style="margin:0px 5px">
         <el-input v-model="treeSetData.newName" placeholder="Durchgangsbereich" size="mini"></el-input>
     </el-col>
     <el-col :span="12">
         <el-button size="mini" type="primary" plain @click.stop="add_area_sure">OK</el-button>
         <el-button size="mini" type="warning" plain @click.stop="add_area_cancel">Abbrechen</el-button>
     </el-col>
 </el-row>

Schaltfläche „Bestätigen“ [add_area_sure]

add_area_sure() {
// Knotendaten hinzufügen. Da es sich um die oberste Ebene handelt, ist die standardmäßige übergeordnete ID pid. Die ID ist die Selbstaddition der [defaultId], die ich bei der Initialisierung festgelegt habe. Sie können das Feld [defaultId] selbst in die Daten einfügen. const nodeObj = {
    ID: this.treeSetData.defaultId++,
    Name: this.treeSetData.newName,
    istEdit: false,
    Kinder: [],
    pid:0
  };
  dies.treeSetData.treeData.push(nodeObj);
  this.treeSetData.addNodeFlg = falsch;
  dies.treeSetData.addList.push(nodeObj);
},

Abbrechen-Schaltfläche [add_area_cancel]

add_area_cancel() {
  this.treeSetData.addNodeFlg = falsch;
  this.treeSetData.newName = "";
},

An dieser Stelle kann der äußerste Knoten hinzugefügt werden.

Die Hinzufügungen, Löschungen und Änderungen im Bearbeitungsstatus werden tatsächlich über die Methode [renderContent] des benutzerdefinierten Knoteninhalts implementiert. Ich werde sie nicht einzeln erklären, da ich bald Feierabend habe. Ich werde das nachholen, wenn ich Zeit habe. Zuerst werde ich den Hauptcode vorstellen~

// Bereichsbaumoperationsgruppenknoten übergeben,
    renderContent(h, { Knoten, Daten, Speicher }) {
        wenn(this.treeSetData.editFlg == false){
            zurückkehren (
                <span Klasse="Baum-Span">
                    <span>{this.showOrEdit(data)}</span>
                    <div Klasse="Baumknoten-Op">
                        <i class="el-icon-edit" on-click={ev => this.nodeEdit(ev, store, data)} style="padding-left: 10px;"></i>
                        <i class="el-icon-circle-plus" on-click={() => this.nodeAdd(node, data)} style="margin-left: 5px;"></i>
                        <i class="el-icon-remove" on-click={() => this.nodeDelete(node, data)} style="margin-left: 5px;"></i>
                    </div>
                </span>
            );
        } anders {
            zurückkehren (
                <span Klasse="Baum-Span">
                    <span>{this.showOrEdit(data)}</span>
                    <div Klasse="Baumknoten-Op">
                    </div>
                </span>
            );
        }
    },

    // Knoten bearbeiten showOrEdit(data) {
      wenn (data.isEdit) {
        zurückkehren (
          <el-Eingabe
            Typ="Text"
            Wert={data.name}
            bei Unschärfe = {ev => this.edit_sure(ev, data)}
            Größe="mini"
            Klasse="Eingabestil"
          ></el-Eingabe>
        );
      } anders {
        return <span className="node_labe">{data.name}</span>;
      }
    },
    nodeEdit(ev, speichern, Daten) {
      data.isEdit = wahr;
      dies.$nextTick(() => {
        const $eingabe =
          ev.target.parentNode.parentNode.querySelector("Eingabe") ||
          ev.target.parentElement.parentElement.querySelector("Eingabe");
        !$Eingabe ? "" : $input.fokus();
      });
    },

    // Bearbeitung bestätigen edit_sure(ev, data) {
        const $eingabe =
            ev.target.parentNode.parentNode.querySelector("Eingabe") ||
            ev.target.parentElement.parentElement.querySelector("Eingabe");
        wenn (!$Eingabe) {
            gibt false zurück;
        } anders {
            Daten.name = $Eingabe.Wert;
            data.isEdit = falsch;
        }
        // Inhalt der Editierbaumdaten ändern let editFilter = this.treeSetData.editList.filter((item)=>item.id == data.id);
        wenn (editFilter.length == 0){
            this.treeSetData.editList.push(Daten);
        } anders {
            dies.treeSetData.editList.forEach((item,i)=>{
                wenn(item.id == data.id) {
                    this.treeSetData.editList[i].name = Daten.name;
                }
            })
        }
    },

    // Knoten hinzufügen nodeAdd(node, data) {
      wenn (data.pid !== 0){
        this.$message({type:'error',message:'Der Zugriffsbereich kann höchstens zwei Hierarchieebenen haben.'});
        gibt false zurück;
      } anders {
          const newChild = { id: this.treeSetData.defaultId++, name: 'Neu hinzugefügter Zugriffsbereich', isEdit:false, pid:data.id, children: [] };
          wenn (!data.children) {
            dies.$set(Daten, 'Kinder', []);
          }
          Daten.Kinder.push(neuesKind);
          dies.treeSetData.addList.push(neuesUntergeordnetes);
      }
    },

    // Knoten löschen nodeDelete(node, data) {
      this.treeSetData.deleteList.push(Daten);
      const übergeordneter Knoten = Knoten.übergeordneter Knoten;
      const Kinder = Eltern.Daten.Kinder || Eltern.Daten;
      const index = children.findIndex(d => d.id === data.id);
      Kinder.spleißen(Index, 1);
    },

Senden Sie dann die verarbeiteten Daten (hinzuzufügende Daten: addList, zu ändernde Daten: editList, zu löschende Daten: deleteList) zur Datenbankverarbeitung an den Hintergrund. Sie müssen jedoch auf die folgenden Situationen achten.

// Erst hinzufügen, dann die Datenintegration ändern this.treeSetData.addList.forEach((item,i)=>{
    let editFilter = this.treeSetData.editList.filter((Wert)=>Wert.id == Artikel-ID);
    wenn (editFilter.length !== 0) {
        this.treeSetData.addList[i] = editFilter[0];
        this.treeSetData.editList = this.treeSetData.editList.filter((Wert)=>Wert.id !== Artikel-ID);
    }
})
// Erst die Datenintegration hinzufügen, dann löschen this.treeSetData.deleteList.forEach((item,i)=>{
    let addFilter = this.treeSetData.addList.filter((Wert)=>Wert.id == Artikel-ID);
    wenn(addFilter.length !== 0){
        this.treeSetData.deleteList = this.treeSetData.deleteList.filter((Wert)=>Wert.id !== Artikel-ID);
        this.treeSetData.addList = this.treeSetData.addList.filter((Wert)=>Wert.id !== Artikel-ID);
    }
})
// Datenintegration erst bearbeiten, dann löschen this.treeSetData.deleteList.forEach((item,i)=>{
    let editFilter = this.treeSetData.editList.filter((Wert)=>Wert.id == Artikel-ID);
    wenn (editFilter.length !== 0) {
        this.treeSetData.editList = this.treeSetData.editList.filter((Wert)=>Wert.id !== Artikel-ID);
    }
})

Baumkomponentenstil

<style lang="less">
.el-message-box {Breite: 450px;}
.button-style {padding: 0px}
.input-style {Höhe: 15px;Breite: 140px;}
.durch-Panel-Körper {
  Polsterung oben: 12px;
  Breite: 100 %;
  Anzeige: Flex;
  .Panelbereich-links {
    Position: relativ;
    Breite: 360px;
    Rand: 2px durchgezogen rgba(240,240,240,1);
    Rahmenradius: 5px;
    .Kopftitel {
        Anzeige: Flex; Inhalt ausrichten: Abstand zwischen; Polsterung: 10px 10px;
        h5{border-left:solid 3px #FB8742;padding-left:5px;height: 20px;line-height:20px;font-size:16px;}
    }
    .Bereichsbaum {
        Breite: 100 %;
        .Baumstil {
            Rand: 0px 0px 10px 10px;
            Höhe: 88 %;
            Überlauf-y: automatisch;
        }
        .el-tree-node__content { 
            Polsterung links: 10px; Anzeige: flexibel; Breite: 100 %; 
            .Baumspanne {
                Anzeige: Flex; Breite: 100 %; 
                .Baumknoten_op {
                    Rand links: 10px; Farbe: #D3D3D3;
                }
            }
        }
    }
    .Frage hinzufügen {
        Rand: 10px 0px;
    }
    .Fußstil{
        Polsterung rechts: 5px; 
        Höhe: 40px;
        Textausrichtung: rechts;
    }
  }
  .Panel-Bereich-rechts {
    Rand rechts: 5px;
    Breite: 100 %;
    Polsterung links: 15px;
    Höhe: 100%;
    .el-Zeile {
      Breite: 100 %;
      Anzeige: Flex;
      Inhalt ausrichten: Abstand dazwischen;
      .Standortklasse {
        Breite: 50%;
      }
      .Geräteboden-Klasse {
        Breite: 50%;
        Anzeige: Flex;
        Inhalt ausrichten: Flex-Ende;
      }
    }
  }
}
</Stil>

Dies ist das Ende dieses Artikels über den Beispielcode für Vue zum Implementieren von Hinzufügen, Löschen, Ändern und Abfragen von Baumstrukturen. Weitere relevante Inhalte zum Hinzufügen, Löschen, Ändern und Abfragen von Vue-Baumstrukturen finden Sie in den vorherigen Artikeln von 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:
  • Verwenden von vue3+ts zum Implementieren des Verwaltungshintergrunds (Hinzufügen, Löschen, Ändern und Überprüfen)
  • Vue verwendet el-tree Lazy Loading, um die Funktionen Hinzufügen, Löschen, Ändern und Abfragen zu implementieren.
  • Vue verwendet Element, um die Schritte Hinzufügen, Löschen, Ändern und Verpacken zu implementieren
  • VUE+Element implementiert Beispiel-Quellcode zum Hinzufügen, Löschen, Ändern und Prüfen
  • Einfache Vue-Operationen zum Hinzufügen, Löschen, Ändern und Prüfen
  • Detaillierte Erläuterung der Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen der Vue-Benutzerverwaltung

<<:  Häufig gestellte Fragen zu Docker

>>:  Lösung für das Problem des verstümmelten Codes in MySQL 5.x

Artikel empfehlen

JS implementiert den Beispielcode der Dezimalkonvertierung in Hexadezimal

Vorwort Beim Schreiben von Code stoßen wir gelege...

js realisiert die Funktion zum Klicken zum Wechseln der Karte

In diesem Artikelbeispiel wird der spezifische Co...

MySQL-Grundanweisungen zum Hinzufügen, Löschen, Ändern und Abfragen

Grammatik Hier ist die allgemeine SQL-Syntax für ...

Lernprogramm zur Verwendung des WeChat-Applets WXS

Was ist wxs? wxs (WeiXin Script) ist eine Skripts...

MySQL-Datenbankoperationen und Datentypen

Inhaltsverzeichnis 1. Datenbankbetrieb 1.1 Datenb...

mysql5.7-Remotezugriffseinstellungen

Das Einrichten des Fernzugriffs in mysql5.7 funkt...

18 Web-Usability-Prinzipien, die Sie kennen müssen

Sie können über die besten visuellen Designfähigk...

React-Methode zum Anzeigen von Daten auf Seiten

Inhaltsverzeichnis Übergeordnete Komponente „list...

Detaillierte Erklärung des Server-ID-Beispiels bei der MySQL-Master-Slave-Synchronisierung

Vorwort Wenn wir einen MySQL-Cluster erstellen, m...

So verwenden Sie border-image, um Beispielcode für Textblasenränder zu implementieren

Während der Entwicklungstätigkeit bin ich auf ein...

Beispiel für das Hoch- und Herunterladen von Dateien im Front-End mit Vue+Express

Erstellen Sie eine neue server.js Garn init -y Ga...

15 Linux-Befehlsaliase, die Ihnen Zeit sparen

Vorwort Bei der Verwaltung und Wartung des Linux-...

Verwenden Sie eine DIV-Maske, um das Problem zu lösen, dass das direkte Aktivieren des Kontrollkästchens mit der Maus ungültig ist

Während des Front-End-Entwicklungsprozesses trat e...

JS erzielt Fünf-Sterne-Lobeffekt

Verwenden Sie JS, um objektorientierte Methoden z...

Connector-Konfiguration in Tomcat

JBoss verwendet Tomcat als Webcontainer. Die Konf...