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
Vue Element-ui implements tree control node adding icon detailed explanation
Table of contents 1. Rendering 2. Bind data and a...
Simple method to install mysql under linux
When searching online for methods to install MySQ...
XHTML Web Page Tutorial
<br />This article is mainly to let beginner...
Facebook's nearly perfect redesign of all Internet services
<br />Original source: http://www.a-xuan.cn/...
Detailed explanation of how to introduce custom fonts (font-face) in CSS
Why did I use this? It all started with the makin...
Mysql5.7.14 installation and configuration method operation graphic tutorial (password problem solution)
This article mainly involves solutions to problem...
Summary of related functions for Mysql query JSON results
The JSON format field is a new attribute added in...
How to use JavaScript to implement sorting algorithms
Table of contents Bubble Sort Selection Sort Inse...
Gogs+Jenkins+Docker automated deployment of .NetCore steps
Table of contents Environmental Description Docke...
Detailed tutorial on installing mysql 5.7.26 on centOS7.4
MariaDB is installed by default in CentOS, which ...
Achieve 3D flip effect with pure CSS3 in a few simple steps
As a required course for front-end developers, CS...
Web Standard Application: Redesign of Tencent QQ Home Page
Tencent QQ’s homepage has been redesigned, and Web...
A brief discussion on the differences between the three major databases: Mysql, SqlServer, and Oracle
MySQL advantage: Small size, fast speed, low tota...
React Hooks Usage Examples
Table of contents A simple component example More...
JavaScript to add and delete messages on the message board
This article shares a small example of adding and...