Implementation of VUE infinite level tree data structure display

Component recursive call
Using the render method

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 call

The 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 method

In 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:

Java Red-Black Tree Data Structure and Algorithm Analysis
Java Data Structure Learning Binary Tree
Definition, search, insertion, construction, and deletion of binary sorted trees in Python data structures
Overview and implementation of Huffman tree in Java data structure
Detailed explanation of how js constructs the data structure of elementUI tree menu
Detailed explanation of the concept of Python data structure tree

<<: Steps to deploy Docker project in IDEA

>>: How to install MySQL 8.0 and log in to MySQL on MacOS