VUE shows unlimited hierarchical tree data structure

In the project, you will encounter some tree-shaped data structures, which are often used in the navigation on the left side of the menu, or in places such as comment references. This data structure has the characteristic of not knowing how many levels it will be nested, so use template to display This kind of data is a bit tricky. This article sorts out two ways to show this data structure.

The data used in the article is the following:

mainData: {
  value: "root",
  children:[{
    value: "层级1-1",
    children:[{
      value: "层级2-1",
      children:[{
          value: "层级3-1",
          children:[]
       }]
     },{
       value: "层级2-2",
       children:[]
     }]
   },{
      value: "层级1-2",
      children:[]
   }]
}

That is, it looks like this.

Component recursive call

The first is the way the component calls itself recursively to create a component, which is referencing 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, the parent component uses the child component, and passes the 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: "层级1-1",
            children:[{
              value: "层级2-1",
              children:[{
                value: "层级3-1",
                children:[]
              }]
            },{
              value: "层级2-2",
              children:[]
            }]
          },{
            value: "层级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

Use the render method

In addition to using components, you can also use Vue's render method to use the full programming capabilities of JavaScript to realize recursive processing of tree-shaped data, thereby displaying an infinite hierarchical tree. as follows:

<template>
  <tree-comp :treeData="mainData"></tree-comp>
</template>
<script>
export default {
  name: 'treeRender',
  data () {
    return {
      mainData: {
        value: "root",
        children:[
          {
            value: "层级1-1",
            children:[{
              value: "层级2-1",
              children:[{
                value: "层级3-1",
                children:[]
              }]
            },{
              value: "层级2-2",
              children:[]
            }]
          },{
            value: "层级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 creatNode(item)
            })
            return h('div', {class:'demo'}, [node.value, hArr])
          }else{
            return h('div', {class:'demo'}, [node.value])
          }          
        }
        return creatNode(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 it is in the render method. The creatNode method uses a recursive method to traverse the tree data depth first, generate vnodes, and then render the page.