Dieses Mal werde ich Ihnen die Schritte zum Implementieren von Baumansichtsdaten in Vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für Vue, um Baumansichtsdaten zu implementieren? .
Dies sind simulierte Treemap-Daten
let all={
name:'all',
children:{
A:{
name:'A',
children:{
a1:{
name:'a1',
children:{
a11:{
name:'a11',
children:null
},
a12:{
name:'a12',
children:null
}
}
},
a2:{
name:'a2',
children:{
b21:{
name:'b21',
children:null
}
}
}
}
},
B:{
name:'B',
children:{
b1:{
name:'b1',
children:{
b11:{
name:'b11',
children:null
},
b12:{
name:'b12',
children:null
}
}
},
b2:{
name:'b2',
children:{
b21:{
name:'b21',
children:null
}
}
}
}
}
}
}Der Code lautet wie folgt
treelist.vue
<template>
<p>
<ul>
<li >
<span @click="isshow()">{{treelist.name}}</span>
<tree v-for="item in treelist.children"
v-if="isFolder"
v-show="open"
:treelist="item"
:keys="item"
></tree>
</li>
</ul>
</p>
</template>
<script>
export default {
name:'tree',
props:['treelist'],
data(){
return{
open:false
}
},computed:{
isFolder:function(){
return this.treelist.children
}
}
,methods:{
isshow(){
if (this.isFolder) {
this.open =!this.open
}
}
}
}
</script>
<style lang="less">
</style>index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>树形图</title> </head> <body> <p id="app"> <tree :treelist="treeList"></tree> </p> </body> </html>
index.js
import Vue from 'vue';
import tree from '../components/treelist.vue'
let all={
name:'all',
children:{
A:{
name:'A',
children:{
a1:{
name:'a1',
children:{
a11:{
name:'a11',
children:null
},
a12:{
name:'a12',
children:null
}
}
},
a2:{
name:'a2',
children:{
b21:{
name:'b21',
children:null
}
}
}
}
},
B:{
name:'B',
children:{
b1:{
name:'b1',
children:{
b11:{
name:'b11',
children:null
},
b12:{
name:'b12',
children:null
}
}
},
b2:{
name:'b2',
children:{
b21:{
name:'b21',
children:null
}
}
}
}
}
}
}
const app=new Vue({
el:"#app",
components:{
'tree':tree
},
data:{
treeList:all
}
})Nachdem ich die Fallstricke durchgegangen war, fand ich einen ähnlichen Fall auf der offiziellen Website von Vue, Link → Portal
Nachdem ich auf die Methode auf der offiziellen Website verwiesen hatte , Ich habe es versucht Der Unterschied zwischen dem Schreiben von
wie diesem und meiner Idee, als ich in die Falle trat, besteht darin, dass eine solche Komponente nur für ein Objekt verantwortlich ist, die Objekte in jedem Kind durchläuft und Übergibt sie einzeln zur Verarbeitung an die Komponente. Es handelt sich um eine Komponente, die mehrere Objekte verarbeitet, siehe unten.
Eine solche Komponente verarbeitet ein Objekt. Welche Vorteile hat das Schreiben?
Ich kann den Schalter innerhalb der Komponente anpassen
Ich habe die Variable offen definiert in Daten. Da die Komponente rekursiv ist, entspricht sie jeder Komponente.
Warum kann ich diese Methode dann nicht verwenden? Wenn ich zum ersten Mal die Grube betrete, besteht ein Versuch darin, dass eine Komponente mehrere Objekte verarbeitet. Dies entspricht einem Schalter, der alle Objekte in untergeordneten Objekten steuert. Wenn der Schalter aktiviert ist, werden alle Objekte derselben Ebene aktiviert zu erweitern
Untergeordnete Elemente durchlaufen und die Komponente selbst einzeln übergeben. Verwenden Sie v-show, um zu steuern, ob
-Attribut , um zu bestimmen, ob die Ausführung basierend auf untergeordneten Elementen fortgesetzt werden soll
<span @click="isshow()">{{treelist.name}}</span> 
Erzielen Sie den Effekt
Sehen wir uns die Ergebnisse an
Wenn Sie die Seite zum ersten Mal betreten, ist das Undefinierte in den Klammern der aktuelle Wert von Isopen, da er nicht definiert ist Diesmal ist es undefiniert
Dann habe ich auf A geklickt
Weil isopen zu diesem Zeitpunkt invertiert wurde, also isopen ist derzeit wahr
Aber die Seite hat sich immer noch nicht geändert, ganz zu schweigen von der Erweiterungsfunktion, auch undefiniert hat sich nicht geändert
Nach einigem Baidu stellt sich heraus, dass Vue selbst keine direkten Änderungen an den von Props empfangenen Werten mehr zulässt
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Ausführlich Erläuterung der Anwendungsfälle der JS-Rückruffunktion
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Implementieren von Baumansichtsdaten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
