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
Lösung für 1067, wenn Mysql in Windows startet
Ich habe erst vor ein paar Tagen mit der Arbeit b...
Detaillierte Erläuterung der MySQL-Startoptionen und Beispiele für Systemvariablen
Inhaltsverzeichnis Startoptionen Befehlszeile Lan...
Importieren von CSS-Dateien unter Verwendung von Beurteilungsbedingungen
Lösung 1: Verwenden Sie bedingten Import im HTML-...
css3-Animation, Ballrollen, js-Steuerung, Animationspause
Mit CSS3 können Animationen erstellt werden, die ...
Eine kurze Diskussion über die VUE Uni-App-Entwicklungsumgebung
Inhaltsverzeichnis 1. Über die visuelle Schnittst...
Detailliertes Tutorial zur Installation von MariaDB auf CentOS 8
Das Datenbankverwaltungssystem MariaDB ist ein Zw...
Was genau passiert im Hintergrund, wenn Sie eine URL eingeben?
Als Softwareentwickler müssen Sie über ein vollst...
Implementierung von Single-Div-Zeichentechniken in CSS
Sie können häufig Artikel über das Zeichnen mit C...
CocosCreator allgemeines Framework-Design Ressourcenmanagement
Inhaltsverzeichnis Probleme mit der Ressourcenver...
Der vollständige Implementierungsprozess von Sudoku mit JavaScript
Inhaltsverzeichnis Vorwort So lösen Sie Sudoku Fü...
Detaillierte Erläuterung der Server- und Standortkonfiguration der einfachen Weiterleitungsanforderung von nginx
Lassen Sie uns kurz die Konfiguration von Server ...
Grundlegende MySQL-Grundlagen: Gruppierungsfunktion, Aggregatfunktion, Gruppierungsabfrage – ausführliche Erklärung
Inhaltsverzeichnis 1. Einfach zu bedienen 2. Verw...
Die untergeordnete Iframe-Seite betreibt die übergeordnete Seite und implementiert den Effekt der Abschirmung der Seiten-Popup-Ebene
Frage: In index.html führt iframe son.html ein. Wi...
Analyse und Lösung der MySQL-Verbindung, die den Fehler „Authentifizierung fehlgeschlagen“ auslöst
[Problembeschreibung] Auf der Anwendungsseite wir...
Detaillierter Prozess zum Erstellen von mysql5.7.29 unter Centos7 von Linux
1. MySQL herunterladen 1.1 Download-Adresse https...