Detaillierte Erläuterung des Organisationsstrukturdiagramms der Vue-Tree-Color-Komponente

npm

# npm verwenden
npm installiere Vue-Tree-Color

Installieren des Loaders

npm install --save-dev weniger weniger-loader

Plugins importieren

Vue von „vue“ importieren
Importieren Sie Vue2OrgTree aus „vue-tree-color“.
 
Vue.use(Vue2OrgTree)

Start

Da die Komponente installiert wurde, können Sie sie direkt verwenden. Verwenden Sie auf der Vue-Seite direkt das Komponenten-Tag, um die Daten dynamisch zu binden (die Daten können rekursive Daten sein).

<vue2-org-tree :data="Daten"/>

Daten werden auf der Seite platziert

In den Datendaten ist „id“ für jedes Element eine andere ID, „label“ ist der Name und „children“ sind eigene Teildaten.

Anordnung

Gerade haben wir die Standardanordnung gesehen, aber es gibt auch eine horizontale Anordnung.

# Fügen Sie einfach horizontal <vue2-org-tree :data="data" :horizontal="true" /> hinzu

Die Wirkung ist wie folgt

Klappdisplay

Fügen Sie eine Eigenschaft zusammenklappbar hinzu

<vue2-org-tree :data="Daten" :horizontal="true" zusammenklappbar /> 

Wie kann ich es erweitern? Sie müssen eine Komponente mit einer eigenen Methode hinzufügen

beim Erweitern

<vue2-org-tree :data="Daten" :horizontal="true" zusammenklappbar @on-expand="onExpand" />

js-Teil

Methoden: {
    zusammenbrechen(Liste) {
        var _this = dies
        Liste.fürJedes(Funktion(Kind) {
            wenn (Kind.erweitern) {
                Kind.expand = false
            }
            Kind.Kinder && _this.collapse(Kind.Kinder)
        })
    },
    onExpand(e, Daten) {
        if ('erweitern' in Daten) {
            Daten.expand = !Daten.expand
            wenn (!data.expand && data.children) {
                dies.collapse(Daten.Kinder)
            }
        } anders {
            dies.$set(Daten, 'erweitern', wahr)
        }
    }
}

Die Wirkung ist wie folgt

Klicken Sie auf den Knoten

Fügen Sie eine Methode beim Klicken auf den Knoten hinzu

<vue2-org-tree :data="Daten" :horizontal="true" zusammenklappbar @on-expand="onExpand" @on-node-click="onNodeHandle" />

js

onNodeHandle(e, Daten) {
    // e sind die Knotendaten console.log(e)
    // Daten sind die auf dem Knoten gerenderten Daten console.log(Daten)
},

Druckergebnisse

Andere Eigenschaften

Die Komponente bietet auch andere Funktionen, die am häufigsten verwendeten sind wahrscheinlich das Einstellen der Knotenfarbe, das Ein- und Ausfahren usw. Ich füge die GitHub-Adresse ein, und diejenigen, die interessiert sind, können sich selbst darüber informieren

Klicken Sie auf den Link unten, um weitere Funktionen der Komponente anzuzeigen

https://github.com/hukaibaihu/vue-org-tree#readme

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der Implementierung des Organisationsstrukturdiagramms der Vue-Tree-Color-Komponente von Vue. Weitere relevante Inhalte zur Implementierung des Organisationsstrukturdiagramms der Vue-Tree-Color-Komponente von Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM in Zukunft unterstützen!