脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VUE 无限层级树形结构

VUE 无限层级树形数据结构显示的实现

 更新时间：2021年07月01日 09:59:25   作者：这个少年有点热丶  
在做项目中，会遇到一些树形的数据结构，常用在左侧菜单导航，本文就介绍一下如何实现，感兴趣的可以了解一下

在做项目中，会遇到一些树形的数据结构，常用在左侧菜单导航，或者评论引用等地方，这种数据结构有个特点是不知道它会嵌套多少层，所以用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，然后渲染出了页面。

到此这篇关于VUE 无限层级树形数据结构显示的实现的文章就介绍到这了,更多相关VUE 无限层级树形结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue中wangEditor5编辑器的基本使用

    vue中wangEditor5编辑器的基本使用

    wangEditor是一个轻量级web富文本编辑器,配置方便,使用简单,下面这篇文章主要给大家介绍了关于vue中wangEditor5编辑器的基本使用,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Vue项目实现简单的权限控制管理功能

    Vue项目实现简单的权限控制管理功能

    这篇文章主要介绍了Vue项目实现简单的权限控制功能，文中给大家介绍了两种方式进行权限限制，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2019-07-07
  • Vue.js单向绑定和双向绑定实例分析

    Vue.js单向绑定和双向绑定实例分析

    这篇文章主要介绍了Vue.js单向绑定和双向绑定,结合实例形式分析了vue.js单向绑定与双向绑定相关原理、实现方法及操作技巧,需要的朋友可以参考下
    2018-08-08
  • Vue项目中实现带参跳转功能

    Vue项目中实现带参跳转功能

    最近做了一个手机端系统，其中遇到了父页面需要携带参数跳转至子页面的问题，现已解决，下面分享一下实现过程，感兴趣的朋友一起看看吧
    2021-04-04
  • Vue中使用this.$set()如何新增数据,更新视图

    Vue中使用this.$set()如何新增数据,更新视图

    这篇文章主要介绍了Vue中使用this.$set()实现新增数据,更新视图方式。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • vue-router清除url地址栏路由参数的操作代码

    vue-router清除url地址栏路由参数的操作代码

    这篇文章主要介绍了vue-router清除url地址栏路由参数,本文给大家介绍的非常详细,需要的朋友可以参考下
    2015-11-11
  • vue3如何使用postcss-px-to-viewport适配屏幕

    vue3如何使用postcss-px-to-viewport适配屏幕

    这篇文章主要介绍了vue3如何使用postcss-px-to-viewport适配屏幕问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • 深入浅析vue-cli@3.0 使用及配置说明

    深入浅析vue-cli@3.0 使用及配置说明

    这篇文章主要介绍了vue-cli@3.0 使用及配置说明,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • vue中前端如何实现pdf预览功能(含vue-pdf插件用法)

    vue中前端如何实现pdf预览功能(含vue-pdf插件用法)

    这篇文章主要给大家介绍了vue中前端如何实现pdf预览功能的相关资料,文中包含vue-pdf插件用法,在前端开发中,很多时候我们需要进行pdf文件的预览操作,需要的朋友可以参考下
    2023-07-07
  • 关于Element-UI中slot的用法及说明

    关于Element-UI中slot的用法及说明

    这篇文章主要介绍了关于Element-UI中slot的用法及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论