vue组件的递归-树形结构

tree_node.vue(组件页面)

<template>
  <ul v-if="list.length" style="margin-left: 20px;">
     <li v-for="(item,index) in  list" :key="index">
       <p>{{item.name}}</p>
       <tree_node :list="item.children" v-if="item.children"></tree_node>
     </li>
  </ul>
</template>

<script>
  export default {
    name: 'tree_node',
    props: {
      list: {
        required: true,
        type: Array
      }
    },
  }
</script>

<style scoped lang="less">

</style>

index.vue(入口页面)

<template>
  <div>
    <TreeNode :list="list"></TreeNode>
  </div>
</template>

<script>
  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'
              }
            ]
          }
        ]
      }
    }
  }
</script>

<style scoped lang="less">

</style>

以上代码运行结果