vue组件的递归-树形结构

tree_node.vue(组件页面)

  
     
       {{item.name}}
       
     
  



  export default {
    name: 'tree_node',
    props: {
      list: {
        required: true,
        type: Array
      }
    },
  }

index.vue(入口页面)

  
    
  



  import TreeNode from './tree_node'
  export default {
    name: 'index',
    components: {TreeNode},
    data () {
      return {
        list: [
          {
            name: '一级01',
            children: [
              {
                name: '一级01->二级01'
              },
              {
                name: '一级01->二级02'
              },
              {
                name: '一级01->二级03',
                children: [
                  {
                    name: '一级01->二级03->三级01',
                    children: [
                      {
                        name: '一级01->二级03->三级01->四级01'
                      },
                      {
                        name: '一级01->二级03->三级01->四级02'
                      }
                    ]
                  },
                  {
                    name: '一级01->二级03->三级02',
                  }
                ]
              }
            ]
          },
          {
            name: '一级02',
            children: [
              {
                name: '一级02->二级01'
              },
              {
                name: '一级02->二级02'
              },
              {
                name: '一级02->二级03'
              }
            ]
          }
        ]
      }
    }
  }

以上代码运行结果