Die Elementbaumsteuerung integriert ein Dropdown-Menü mit Symbolen (Baum+Dropdown+Eingabe)

<el-col :span="4" :xs="24">
   <!--Verzeichnissuchfunktion-->
  <div Klasse="Kopf-Container">
    <el-Eingabe
      v-model="dirNameCn"
      Platzhalter="Bitte geben Sie den Verzeichnisnamen ein"
      löschbar
      Größe="klein"
      Präfix-Symbol = "el-icon-search"
      Stil="Rand unten: 20px"
    />
  </div>
  <!--Baumanzeige-->
  <div Klasse="Kopf-Container">
    <el-Baum
      :data="dirTreeOptions"
      :props="StandardProps"
      :Erweitern beim Klicken auf Knoten="false"
      :filter-node-method="Filterknoten"
      ref="Baum"
      Standardmäßig alles erweitern
      @node-click="Klick auf Knoten handhaben"
      Symbolklasse = "el-icon-folder-opened"
      Knotenschlüssel="id"
      :Überprüfung beim Klicken auf Knoten="true"
    >
      <!--Versteckte neue Symbole-->
      <span class="custom-tree-node" slot-scope="{ Knoten, Daten }" @mouseenter="mouseenter(Daten)" @mouseleave="mouseleave(Daten)">
        <span>{{ node.label }}</span>
        <div>
          <i v-show="data.show" Klasse="el-icon-circle-plus" Stil="Farbe: #00afff" @click="addDial(Knoten, Daten)"/>
          <!--Ausgeblendete Dropdown-Auswahl-->
          <el-dropdown trigger="Klick" placement="rechts" @command="(command) => {handleCommand(command)}">
            <i v-show="data.show" Klasse="el-icon-more" Stil="Farbe: #D3D3D3"/>
            <el-dropdown-menu slot="Dropdown">
              <el-dropdown-item command="a">Umbenennen</el-dropdown-item>
              <el-dropdown-item command="b">Löschen</el-dropdown-item>
            </el-Dropdown-Menü>
          </el-dropdown>
        </div>
      </span>
    </el-Baum>
  </div>
</el-col>

<Skript>
  Standard exportieren {
    Name: "reqmdoctree",
    Daten() {
      zurückkehren {
        // Der Inhalt des linken Suchfeldes dirNameCn: '',
       	// Verzeichnisbaumoptionen dirTreeOptions: undefiniert,
        Standardeigenschaften: {
          Kinder: "Kinder",
          Bezeichnung: "Bezeichnung"
        },
        // Ob es im Baummenü einen untergeordneten Knoten gibt yesChild: undefiniert,
        // Kontrollieren Sie das neu hinzugefügte Eingabeaufforderungsinformationsfeld auf der linken Seite show: 0,
        // Abfrage der Informationsparameter des Anforderungsdokuments queryParams: {
          docNo: undefined, // Dokumentnummer docNameEn: undefined, // Englischer Dokumentname dirNo: undefined, // Verzeichnisnummer current: 1, // Aktuelle Seitengröße: 20 // Wie viele Elemente werden pro Seite angezeigt },
        treeId: undefiniert,
      }
    },
    Methoden: {
      /**Frage die Dropdown-Baumstruktur des gewünschten Verzeichnisses ab*/
      getTreeselect() {
        treeselect().dann(Antwort => {
          this.dirTreeOptions = Antwort.Daten
        })
      },
      // Suchwert ist Filterfunktion filterNode(value, data) {
        wenn (!Wert) true zurückgibt
        gibt data.label.indexOf(Wert) zurück !== -1
      },
      // Rückruffunktion, wenn auf den Knoten geklickt wird handleNodeClick(data) {
        // konsole.log(Daten)
        diese.treeId = data.id
        dies.yesChild = Daten.Kinder
        this.queryParams.dirNo = Daten.id
        dies.getList()
      },
      //Ereignisse von drei Punkten im Baum handleCommand(command) {
        wenn (Befehl == 'a') {
          Wählen SieReqNo(this.treeId).then(response => {
            diese.uuid = antwort.msg
            getObjTree(Antwort.msg).dann(Antwort => {
              dieses.Formular = Antwort.Daten
              dies.öffnen = wahr
              this.title = 'Konfigurationstabelle des Anforderungsdokumentverzeichnisses ändern'
            })
          })
        }
        wenn (Befehl == 'b') {
          wenn (this.yesChild != undefiniert) {
            dies.$notify.error({
              Titel: 'Warnung',
              Meldung: „In diesem Verzeichnis gibt es andere Ordner“
            })
          } anders {
            Wählen SieReqNo(this.treeId).then(response => {
              diese.uuid = antwort.msg
              this.$confirm('Möchten Sie das Datenelement mit der ID ' + this.uuid + ' wirklich löschen?', 'Warnung', {
                confirmButtonText: 'Bestätigen',
                cancelButtonText: 'Abbrechen',
                Typ: "Warnung"
              }).dann(()=>{
                gibt delObjTree(this.uuid) zurück
              }).dann(Daten => {
                dies.getTreeselect()
                this.msgSuccess('Erfolgreich gelöscht')
              }).catch(Funktion() {
              })
            })
          }
        }
      },
      // Erstelle links ein neues Verzeichnis/eine neue Datei addDial(node, data) {
        // konsole.log(Knoten, '---', Daten)
        dies.reset()
        this.form.dirParentId = Daten-ID
        dies.öffnen = wahr
        this.title = 'Konfigurationstabelle für Anforderungsdokumentverzeichnis hinzufügen'
      },
      // Symbol anzeigen, wenn die Maus nach links bewegt wird mouseenter(data){
        dies.$set(Daten, 'anzeigen', wahr)
      },
      // Das Symbol wird nicht angezeigt, wenn die linke Maustaste den Mauszeiger verlässt mouseleave(data){
        dies.$set(Daten, 'anzeigen', falsch)
      },
      //Öffnen Sie hier das neue Ressourcen-Popup-Fenster......
    }
  }
</Skript>