vue中简单的无限树形结构tree.vue

再-接-再-厉

于 2017-10-13 13:52:05 发布

阅读量1w

点赞数

分类专栏：框架文章标签： vue cil实例递归 tree.vue

本文链接：https://blog.youkuaiyun.com/qq_36196162/article/details/78225131

版权

框架专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue中创建无限递归的树形结构，通过`:is`动态组件属性实现递归循环，并利用open数据区分同级节点，详细解析tree.vue组件的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要解决两个问题：

第一个：递归循环，这里是用：is 动态指定组件来解决的。

第二个：同级如何区分，传入的数组中要提供相应的open数据，以供区分使用：is = 'open'

tree.vue代码


   
   
    
     
     
      
      
      
        
       
       
         {{o.name}} 
       
      
      
      
      
      
      
    
     
     
  
    
    

   
   
<script>
  export default {
    name: 'tree',
    props: ['list', 'orgId'],
    methods: {
      showSubList (data) {
        if (data.open) {
          data.open = null
        } else {
          data.open = 'tree'
        }
      }
    }
  }
</script>

json数据

[{
"code": "nj",
"gmtCreate": null,
"gmtModified": null,
"list": null,
"name": "南京市",
"open": null,
"orderNum": 0,
"orgId": 2,
"parentId": 1,
"parentName": "江苏省",
"status": 1
}, {...}]

其他组件调用

<component :is="currentView" :list="orgList" :orgId="0"></component>