乐趣区

关于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,而后渲染出了页面。

退出移动版