Vue verwendet el-tree Lazy Loading, um die Funktionen Hinzufügen, Löschen, Ändern und Abfragen zu implementieren.

// refreshNode: der zu aktualisierende Knoten; newNodeData: neue Daten des untergeordneten Knotens refreshNode.splice(0, refreshNode.length);
Aktualisieren Sie Node.doCreateChildren(newNodeData);

menuNodeClick(Daten, Knoten, Baumknoten) {
    this.selectNodeData = Daten
    this.selectNode = Knoten
}

/**
* Knotendaten aktualisieren * @node [Knoten/Objekt]: Knoten aktualisieren, alle Knoten unter dem Knoten aktualisieren * @type [Zeichenfolge]: Knotentyp, „Knoten“ bedeutet, dass der Knoten die Knoteninformationen des Baums sind; „Daten“ bedeutet, dass der Knoten die Daten in den Knoteninformationen des Baums sind */
refreshTreeNode(Knoten, Typ) {
    lass Node aktualisieren;
    // Den untergeordneten Knoten des zu aktualisierenden Knotens abrufen if(type === 'node') {
        Knoten aktualisieren = Knoten.Unterknoten
    }sonst wenn(Typ === 'Daten') {
        lass getNode = this.$refs.tree.getNode(Knoten)
        RefreshNode = getNode.childNodes
    }
    // Den ursprünglichen untergeordneten Knoten löschen refreshNode.splice(0, refreshNode.length);
    //Daten erneut anfordern und Knoten aktualisieren this.requestTreeNode(node)
}

// Den aktuellen Knoten so einstellen, dass dieser ausgewählt wird.$refs.tree.setCurrentKey(
    dies.selectNodeData[dieses.nodeKey]
)

[
    {
        ...,
        Kinder: [
            {
                ...,
                Kinder: [
                    {
                        ...,
                        Kinder: [...],
                    },
                    {
                        ...,
                        Kinder: [...],
                    }
                ]
            },
            {
                ...,
                Kinder: [
                    {
                        ...,
                        Kinder: [...],
                    }
                ]
            }
        ]
    }
    
]

<el-Baum
            :data="BaumDaten"
            :props="StandardProps"
            :load="NodeTree laden"
            @node-click="Klick auf Knoten handhaben"
            faul
            :Erweitern beim Klicken auf Knoten="false"
             :Standard-erweiterte-Schlüssel="['1']"
            Knotenschlüssel="id"
            :highlight-current="wahr"
          >
            <span class="custom-tree-node" slot-scope="{ Knoten, Daten }">
              <span class="treeLeft">{{ node.label }}</span>
              <span Klasse="BaumRechts">
                <i
                  v-if="Knotenebene === 1"
                  @click="() => appendNode(Knoten, Daten)"
                  Klasse="el-icon-plus"
                  Stil="Farbe: blau"
                ></i>
                <!--Gruppe hinzufügen-->
                <!-- Der Stammknoten muss nicht gelöscht oder umbenannt werden-->

                <i
                  v-if="data.id !== 0"
                  @click="() => deleteNode(Knoten, Daten)"
                  Klasse="el-icon-delete"
                  Stil="Farbe: rot"
                ></i>
                <!--Gruppe löschen-->

                <i
                  v-if="data.id !== 0"
                  @click="() => editNode(Knoten, Daten)"
                  Klasse="el-icon-edit"
                  Stil="Farbe: blau"
                ></i>
                <!--Gruppe umbenennen-->
              </span>
            </span>
          </el-Baum>

 // Baummenü treeData: [], // Baumknoten defaultProps: { // Standardparameter des Datenarrays von el-tree ändern children: 'children',
        Bezeichnung: "Name",
        id: "ID",
        parentId: "übergeordneteID",
        isLeaf: 'leaf' // Gibt an, ob der Knoten ein Blattknoten ist, was nur gültig ist, wenn das Lazy-Attribut angegeben ist},

 // Baumdaten laden loadNodeTree(node, resolve) {
      const das = dies
      wenn (Knotenebene === 0) {
        that.loadtreeData(Knoten, auflösen)
      } sonst wenn (Knotenebene === 1) {
        that.getChildByList(Knoten, auflösen)
      }
    },
    // Get loadtreeData ist das Abrufen der Daten des übergeordneten Knotens, getChildByList dient zum asynchronen Abrufen der Daten des untergeordneten Knotens loadtreeData(nodeData, resolve) {
      const Datentyp = {
        Seitenindex: 1,
        Seitengröße: 100000
      }
      getAlltype(Datentyp)
        .then(res => {
          const rootChildren = []
          wenn (res.code === 200) {
            const data = res.data.list
            Daten.map(Element => {
              rootChildren.push({
                Name: Artikel.TypName,
                übergeordnete ID: '',
                ID: Artikel-ID,
                Blatt: falsch,
                Kinder: []
              })
            })
            //Wenn resolve Inhalt hat, wird dieser verzögert geladen und abgefragt, andernfalls wird er geändert if (resolve) {
              auflösen(RootChildren)
            } anders {
              nodeData.childNodes = []
              nodeData.doCreateChildren(rootChildren)
            }
          } anders {
            lösen([])
          }
        })
    },
    // Untergeordneten Knoten abrufen Anfrage getChildByList(nodeData, resolve) {
      var _parentID = nodeData.data.id
      const Typspezifikation = {
        Typ-ID: _Eltern-ID,
        Seitenindex: 1,
        Seitengröße: 100000
      }
      getAlltypeSpec(typeSpec).then(res => {
        const rootChildren = []
        wenn (res.code === 200) {
          const data = res.data.list
          Daten.map(Element => {
            rootChildren.push({
              Name: Artikelbeschreibung,
              übergeordnete ID: Artikel.Typ-ID,
              ID: Artikel-ID,
              Blatt: wahr,
              Kinder: []
            })
          })
          wenn (auflösen) {
            auflösen(RootChildren)
          } anders {
            nodeData.childNodes = []
            nodeData.doCreateChildren(rootChildren)
          }
        } anders {
          return false
        }
      }).catch(err => {
        console.log(fehler)
      })
    },
    // Knotenklickereignis handleNodeClick(data, node) {
      this.addnode = Knoten
      this.adddata = Daten
      wenn (Knotenebene === 1) {
        this.queryForm.typeId = node.data.id
        this.queryForm.typeSpecId = ''
      } sonst wenn (Knotenebene === 2) {
        this.queryForm.typeId = node.data.parentId
        this.queryForm.typeSpecId = node.data.id
      }
      diese.Abfrage()
    },

 // Baumknoten fügt Typspezifikation hinzu appendNode(node, data) {
      diese.addTypesSpec = {
        Typname: node.data.name,
        Typ-ID: node.data.id
      }
      this.createTypesSpecDialog = true
    },
    // Baumtypänderung editNode(node, data) {
      const typeId = node.data.parentId
      // Typ der Ebene 1, wenn (node.level === 1) {
        this.editTypesDialog = true
        diese.editTypes = {
          ID: node.data.id,
          Typname: node.data.name
        }
      } anders {
        this.editTypesSpecDialog = true
        dies.getSelectTypes()
        // dies.editTypesSpec = Object.assign({}, node.data)
        diese.editTypesSpec = {
          Typ-ID: Typ-ID,
          ID: node.data.id,
          Beschreibung: node.data.name
        }
      }
    },

    // Baumtyp löschen deleteNode(node, data) {
      // Typ der Ebene 1, wenn (node.level === 1) {
        this.$msgbox.confirm('Dieser Vorgang löscht die Asset-Typ-Daten. Möchten Sie fortfahren?', 'Löschaufforderung', {
          confirmButtonText: 'Bestätigen',
          cancelButtonText: 'Abbrechen',
          Typ: "Warnung"
        }).then(() => {
          TypDel(Knoten.Daten.ID).dann(
            bzw. => {
              this.$message('Erfolgreich gelöscht')
              diese.Abfrage()
              dies.loadNodeTree(Knoten.übergeordnet)
            },
            err => {
              console.log('fehler', fehler)
            }
          )
        }).catch(() => {
          this.$message.error('Abgebrochen')
        })
      } anders {
        this.$msgbox.confirm('Dieser Vorgang löscht die Spezifikationsdaten des Asset-Typs. Möchten Sie fortfahren?', 'Löschaufforderung', {
          confirmButtonText: 'Bestätigen',
          cancelButtonText: 'Abbrechen',
          Typ: "Warnung"
        }).then(() => {
          TypSpecDel(Knoten.Daten.ID).dann(
            bzw. => {
              dies.loadNodeTree(Knoten.übergeordnet)
              this.$message('Erfolgreich gelöscht')
              diese.Abfrage()
            },
            err => {
              console.log('fehler', fehler)
            }
          )
        }).catch(() => {
          this.$message.error('Abgebrochen')
        })
      }
    },

 this.$message('Bearbeiten erfolgreich')
              dies.loadNodeTree(dieses.addnode.parent)

wenn (!node.expanded) {
    node.expand();
}anders {
    Knoten.collapse();
}

Knoten übergeordneter Knoten