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
Win10+Ubuntu 20.04 LTS dual system installation (UEFI + GPT) (pictures and text, multiple pictures warning)
Win10 installation (skip if already installed) Fo...
Detailed explanation of four solutions to floating problems in CSS layout
1. Cause: The effect after the subbox is set to f...
JS implements the snake game
Table of contents 1. Initialization structure 2. ...
Native JS implements a very good-looking counter
Today I will share with you a good-looking counte...
How to enhance Linux and Unix server security
Network security is a very important topic, and t...
mysql8.0.11 winx64 installation and configuration method graphic tutorial (win10)
The installation tutorial of mysql 8.0.11 winx64 ...
MySQL8.0.18 configuration of multiple masters and one slave
Table of contents 1. Realistic Background 2. Agre...
HTML optimization techniques you must know
To improve the performance of web pages, many dev...
uni-app implements NFC reading function
This article shares the specific code of uni-app ...
Detailed explanation of the functions of -I (uppercase i), -L (uppercase l), and -l (lowercase l) when compiling programs with g++ under Linux
As an entry-level Linux user, I have used simple ...
Summary of MySQL's commonly used SQL statements for creating tables, adding fields, modifying fields, and adding indexes
This article uses examples to describe the common...
In-depth understanding of the implementation principle of require loader
Preface We often say that node is not a new progr...
Nginx solves cross-domain issues and embeds third-party pages
Table of contents Preface difficulty Cross-domain...
Detailed explanation of lazy loading and preloading of webpack
Table of contents Normal loading Lazy Loading Pre...
JavaScript+html to implement front-end page sliding verification
This article shares the specific code of JavaScri...