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
Mit CSS3 lässt sich ein umdrehbarer Hover-Effekt erzielen
CSS3 implementiert einen umdrehbaren Hover-Effekt...
JavaScript-Implementierung der Dropdown-Liste
In diesem Artikelbeispiel wird der spezifische Ja...
So verwenden Sie @media in mobilen adaptiven Stilen
Allgemeiner Handy-Stil: @media alle und (Ausricht...
Einführung in die Wissenspunkte MySql-Tabelle, Datenbank, Sharding und Partitionierung
1. Einleitung Wenn die Datenmenge in der Datenban...
JavaScript-Canvas zum Erzielen eines Code-Rain-Effekts
In diesem Artikel wird der spezifische Code für C...
Detaillierte Erklärung zur Verwendung von ElementUI in Vue
Anmeldung + SessionStorage Effektanzeige Nach ein...
So verwenden Sie Selenium + Testng, um Webautomatisierung in Docker zu realisieren
Vorwort Nachdem ich lange Zeit verschiedene Mater...
Implementierung der Bindungskonfiguration für duale Netzwerkkarten im Linux-System
Systemversion [root@ ~]# cat /etc/redhat-release ...
Das WeChat-Applet implementiert den Serveraufbau des Benutzeranmeldemoduls
Ich habe node.js zum Erstellen des Servers gewähl...
Die vollständige Liste der MIME-Typen
Was ist ein MIME-TYP? 1. Zunächst müssen wir vers...
Drücken Sie die Eingabetaste, um das Formular automatisch abzuschicken. Unerwartete Entdeckung
Code kopieren Der Code lautet wie folgt: <!DOC...
Lösung für das Problem, dass die InnoDB-Engine beim Starten von MySQL deaktiviert wird
Finden Sie das Problem Als ich heute bei der Arbe...
JavaScript zum Erzielen eines Digitaluhreffekts
In diesem Artikelbeispiel wird der spezifische Ja...
Installations- und Nutzungsprotokoll von VMware ESXi (mit Download)
Inhaltsverzeichnis 1. Installieren Sie ESXi 2. ES...
Zusammenfassung von 10 erstaunlichen Tricks von Element-UI
Inhaltsverzeichnis el-scrollbar Bildlaufleiste el...