关于vue.js:VUE展示无限层级树形数据结构

在做我的项目中，会遇到一些树形的数据结构，罕用在左侧菜单导航，或者评论援用等中央，这种数据结构有个特点是不晓得它会嵌套多少层，所以用 template 去展现这样的数据时就有点辣手，这篇文章梳理两种展现这种数据结构的办法。

文章中用到的数据是上面这个：

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

也就是上面这个样子。

组件递归调用

第一种是组件递归调用本人的形式，创立一个组件，该组件在援用本人去展现 children 的数据，子组件如下：

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

而后创立父组件，父组件应用子组件，并将数据传入子组件。

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

对于递归组件的内容，在官网文档里是有提到的 –> 递归组件

应用 render 办法

除了应用组件的形式，也能够应用 vue 的 render 办法，去利用 JavaScript 的齐全编程的能力，实现递归解决树形数据，从而展现出有限层级树。如下：

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

其中最外围的就是在 render 办法里，creatNode 办法用递归的形式，深度优先遍历树状数据，生成 vnode，而后渲染出了页面。