Implementierung der VUE-Anzeige unendlicher Ebenenbaum-Datenstrukturen
|
Wenn Sie an einem Projekt arbeiten, werden Sie auf einige baumartige Datenstrukturen stoßen, die häufig in der linken Menünavigation, in Kommentarverweisen usw. verwendet werden. Ein Merkmal dieser Datenstruktur ist, dass Sie nicht wissen, wie viele Ebenen sie verschachtelt sein werden. Daher ist es etwas schwierig, eine Vorlage zum Anzeigen solcher Daten zu verwenden. Dieser Artikel beschreibt zwei Methoden zum Anzeigen dieser Datenstruktur. Die im Artikel verwendeten Daten sind wie folgt:
Hauptdaten: {
Wert: "root",
Kinder:[{
Wert: "Level 1-1",
Kinder:[{
Wert: "Level 2-1",
Kinder:[{
Wert: "Level 3-1",
Kinder:[]
}]
},{
Wert: "Level 2-2",
Kinder:[]
}]
},{
Wert: "Level 1-2",
Kinder:[]
}]
}
Es sieht so aus.
Rekursiver Aufruf der KomponenteDie erste ist eine Komponente, die sich selbst rekursiv aufruft und eine Komponente erstellt, die auf sich selbst verweist, um die Daten der untergeordneten Komponenten anzuzeigen. Die untergeordneten Komponenten sind wie folgt:
<Vorlage>
<div>
<div Klasse="Demo">
{{treeData.Wert}}
<tree-comp v-for="(Element, Index) in treeData.children" :treeData="Element"></tree-comp>
</div>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Name: "treeComp",
Requisiten:{
Baumdaten: {
Standard: Funktion(){
zurückkehren {}
}
}
},
montiert(){},
Methoden:{}
}
</Skript>
<style lang="less" scoped>
.demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px gestrichelt #999;
&:vor{Inhalt:'--';Anzeige: Inline-Block;Padding:0 4px;}
}
</Stil>
Erstellen Sie dann eine übergeordnete Komponente, die die untergeordnete Komponente verwendet und Daten an die untergeordnete Komponente übergibt.
<Vorlage>
<tree-comp:treeData="Hauptdaten"></tree-comp>
</Vorlage>
<Skript>
Standard exportieren {
Name: "treeMain",
Daten () {
zurückkehren {
Hauptdaten: {
Wert: "root",
Kinder:[
{
Wert: "Level 1-1",
Kinder:[{
Wert: "Level 2-1",
Kinder:[{
Wert: "Level 3-1",
Kinder:[]
}]
},{
Wert: "Level 2-2",
Kinder:[]
}]
},{
Wert: "Level 1-2",
Kinder:[]
}
]
}
}
},
Komponenten: {
"Baumkomp": () => import('./TreeComp')
},
montiert(){},
Methoden:{}
}
</Skript>
Der Inhalt rekursiver Komponenten wird in der offiziellen Dokumentation erwähnt -> Rekursive Komponenten Verwenden der RendermethodeZusätzlich zur Verwendung von Komponenten können Sie auch die Rendermethode von Vue verwenden, um die vollständigen Programmierfunktionen von JavaScript zu nutzen, Baumdaten rekursiv zu verarbeiten und so einen Baum mit unendlichen Ebenen anzuzeigen. wie folgt:
<Vorlage>
<tree-comp:treeData="Hauptdaten"></tree-comp>
</Vorlage>
<Skript>
Standard exportieren {
Name: "treeRender",
Daten () {
zurückkehren {
Hauptdaten: {
Wert: "root",
Kinder:[
{
Wert: "Level 1-1",
Kinder:[{
Wert: "Level 2-1",
Kinder:[{
Wert: "Level 3-1",
Kinder:[]
}]
},{
Wert: "Level 2-2",
Kinder:[]
}]
},{
Wert: "Level 1-2",
Kinder:[]
}
]
}
}
},
Komponenten: {
Baumkomp:{
funktional: wahr,
Requisiten: {treeData: Objekt},
rendern(h, {Eigenschaften: {treeData = {}}}) {
const creatNode = (Knoten)=>{
wenn(Knoten.Kinder && Knoten.Kinder.Länge > 0){
lass hArr = node.children.map(item=>{
returniere createNode(Element)
})
returniere h('div', {Klasse:'demo'}, [Knoten.Wert, hArr])
}anders{
returniere h('div', {Klasse:'demo'}, [Knoten.Wert])
}
}
returniere Knoten erstellen(Baumdaten)
},
}
},
montiert(){},
Methoden:{}
}
</Skript>
<style lang="less" scoped>
.demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px gestrichelt #999;
&:vor{Inhalt:'--';Anzeige: Inline-Block;Padding:0 4px;}
}
</Stil>
Der Kern davon ist die Rendermethode, bei der die Methode creatNode die Baumdaten rekursiv und in der Tiefe durchläuft, einen Vnode generiert und dann die Seite rendert. Dies ist das Ende dieses Artikels über die Implementierung der VUE-Anzeige von unendlichen Baumdatenstrukturen. Weitere relevante Inhalte zu VUE-Baumstrukturen mit unendlichen Ebenen 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:
|
<<: Schritte zum Bereitstellen eines Docker-Projekts in IDEA
>>: So installieren Sie MySQL 8.0 und melden sich bei MySQL unter MacOS an
Artikel empfehlen
Wissen Sie, wie Sie das Laden von Webfonts optimieren können?
Genau wie der Titel! Die allgemein verwendete Schr...
Installation von mysql5.7 und Implementierungsprozess der langfristigen kostenlosen Nutzung von Navicate
(I) Installation von mysql5.7: ❀ Details: Die Ins...
Detaillierte Analyse der HTML-Semantik und der zugehörigen Front-End-Frameworks
Über Semantik Die Semantik ist die Lehre von der ...
So richten Sie die Swap-Partition SWAP in Linux 7.7 ein
Die Swap-Partition des Linux-Systems, also die Sw...
CSS-Schreibstandards und -Reihenfolge teilen [für alle empfohlen]
CSS-Schreibreihenfolge 1. Positionsattribute (Pos...
Detailliertes Tutorial zum Erstellen einer privaten Nextcloud-Cloud-Speichernetzwerkfestplatte
Nextcloud ist ein Open Source- und kostenloses Ne...
Verwenden Sie href, um durch einfaches Klicken auf einen Link zu einer bestimmten Stelle auf der Seite zu springen
Nachdem Sie auf der Seite auf das a-Tag geklickt h...
Implementierung der Änderung von Konfigurationsdateien im Docker-Container
1. Betreten Sie den Container docker run [Option]...
Vergleichstabelle für chinesische und englische Dateinamen der Founder-Schriftbibliothek
Founder Type Library ist eine Schriftbibliothek, ...
Das Implementierungsprinzip von Tomcat zur Korrektur des nativen Threadpool-Fehlers des JDK
Um die Verarbeitungsleistung und Parallelität zu ...
Der URL-Wert des SRC- oder CSS-Hintergrundbildes ist der Base64-codierte Code
Möglicherweise ist Ihnen aufgefallen, dass auf die...
MySQL-Lösung zum Erstellen eines horizontalen Histogramms
Vorwort Histogramme sind grundlegende statistisch...
Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel
Vorwort Jeder weiß, dass viele Websites mittlerwe...
Eine kurze Diskussion über den Vergleich von varchar, char und text in der PostgreSQL-Datenbank
Wie unten dargestellt: Name beschreiben Zeichen v...
Was sind die neuen CSS-Pseudoklassenfunktionen :where und :is?
Was sind :is und :where? :is() und :where() sind ...