Implementation of VUE infinite level tree data structure display
|
When working on a project, you will encounter some tree-like data structures, which are often used in left-side menu navigation, comment references, etc. A feature of this data structure is that you don’t know how many levels it will be nested, so it is a bit tricky to use a template to display such data. This article sorts out two methods to display this data structure. The data used in the article is as follows:
mainData: {
value: "root",
children:[{
value: "Level 1-1",
children:[{
value: "Level 2-1",
children:[{
value: "Level 3-1",
children:[]
}]
},{
value: "Level 2-2",
children:[]
}]
},{
value: "Level 1-2",
children:[]
}]
}
It looks like this.
Component recursive callThe first is a component that recursively calls itself, creating a component that references itself to display the children's data. The child components are as follows:
<template>
<div>
<div class="demo">
{{treeData.value}}
<tree-comp v-for="(item, index) in treeData.children" :treeData="item"></tree-comp>
</div>
</div>
</template>
<script>
export default {
name: 'treeComp',
props:{
treeData: {
default: function(){
return {}
}
}
},
mounted(){},
methods:{}
}
</script>
<style lang="less" scoped>
.demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;
&:before{content:'--';display: inline-block;padding:0 4px;}
}
</style>
Then create a parent component that uses the child component and passes data to the child component.
<template>
<tree-comp :treeData="mainData"></tree-comp>
</template>
<script>
export default {
name: 'treeMain',
data () {
return {
mainData: {
value: "root",
children:[
{
value: "Level 1-1",
children:[{
value: "Level 2-1",
children:[{
value: "Level 3-1",
children:[]
}]
},{
value: "Level 2-2",
children:[]
}]
},{
value: "Level 1-2",
children:[]
}
]
}
}
},
components:{
"tree-comp": () => import('./TreeComp')
},
mounted(){},
methods:{}
}
</script>
Regarding the content of recursive components, it is mentioned in the official documentation-->Recursive components Using the render methodIn addition to using components, you can also use Vue's render method to take advantage of JavaScript's full programming capabilities to recursively process tree data, thereby displaying an infinite level tree. as follows:
<template>
<tree-comp :treeData="mainData"></tree-comp>
</template>
<script>
export default {
name: 'treeRender',
data () {
return {
mainData: {
value: "root",
children:[
{
value: "Level 1-1",
children:[{
value: "Level 2-1",
children:[{
value: "Level 3-1",
children:[]
}]
},{
value: "Level 2-2",
children:[]
}]
},{
value: "Level 1-2",
children:[]
}
]
}
}
},
components:{
treeComp:{
functional: true,
props: {treeData: Object},
render(h, {props: {treeData = {}}}) {
const creatNode = (node)=>{
if(node.children && node.children.length > 0){
let hArr = node.children.map(item=>{
return createNode(item)
})
return h('div', {class:'demo'}, [node.value, hArr])
}else{
return h('div', {class:'demo'}, [node.value])
}
}
return createNode(treeData)
},
}
},
mounted(){},
methods:{}
}
</script>
<style lang="less" scoped>
.demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;
&:before{content:'--';display: inline-block;padding:0 4px;}
}
</style>
The core of this is the render method, where the creatNode method recursively traverses the tree data in a depth-first manner, generates a vnode, and then renders the page. This is the end of this article about the implementation of VUE infinite-level tree data structure display. For more relevant VUE infinite-level tree structure content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Steps to deploy Docker project in IDEA
>>: How to install MySQL 8.0 and log in to MySQL on MacOS
Recommend
WeChat applet canvas implements signature function
In the WeChat applet project, the development mod...
Docker installs the official Redis image and enables password authentication
Reference: Docker official redis documentation 1....
1 minute Vue implements right-click menu
Table of contents Rendering Install Code Implemen...
Javascript uses the integrity attribute for security verification
Table of contents 1. Import files using script ta...
How to create a Django project + connect to MySQL
1: django-admin.py startproject project name 2: c...
Detailed explanation of the JavaScript timer principle
Table of contents 1. setTimeout() timer 2. Stop t...
CSS3 achieves cool 3D rotation perspective effect
CSS3 achieves cool 3D rotation perspective 3D ani...
Solution to ONLY_FULL_GROUP_BY error in Mysql5.7 and above
Recently, during the development process, the MyS...
Teach you the detailed process of installing DOClever with Docker Compose
Table of contents 1. What is Docker Compose and h...
How to use Element in React project
This is my first time using the element framework...
Vue uses monaco to achieve code highlighting
Using the Vue language and element components, we...
Notes on element's form components
Element form and code display For details, please...
In-depth explanation of Vue multi-select list component
A Multi-Select is a UI element that lists all opt...
How to solve the problem of command failure caused by overwriting the original PATH and prompting command not found
A colleague asked me to help him figure out why m...
Several ways to encapsulate breadcrumb function components in Vue3
Table of contents Preface 1. Why do we need bread...