回调形成树形结构tree

 //Tree.vue
 <template>
   <li>
  <span @click="toggle">
        <i v-if="isFolder" class="el-icon-error" :class="[open ? 'folder-open': 'folder']"></i>
        <i v-if="!isFolder" class="icon el-icon-success"></i>
        {{ model.menuName }}
  </span>
       <ul v-show="open" v-if="isFolder">
         <tree-menu v-for="item in model.children" :model="item"></tree-menu>
       </ul>
   </li>
 </template>
 <script>
   export default {
     name: 'treeMenu',
     props: ['model'],
     data() {
       return {
         open: true,
       }
     },
     computed: {
       isFolder: function () {
         return this.model.children && this.model.children.length//如果有children就isFolder=true,然后就展示循环遍历自己的树tree结构；
       }
     },
     methods: {
       toggle: function () {//切换关闭，展开，
         if (this.isFolder) {
           this.open = !this.open
         }
       }
     }
   }
 </script>
 <style>
   ul {
     list-style: none;
   }
   i.icon {
     display: inline-block;
     width: 15px;
     height: 15px;
     background-repeat: no-repeat;
     vertical-align: middle;
   }
   .tree-menu li {
     line-height: 1.5;
   }
 </style>

 //views/tree/index.vue
 <template>
   <div class="tree-menu">
     <ul v-for="menuItem in theModel">
       <tree-menu :model="menuItem"></tree-menu>
     </ul>
   </div>
 </template>
 <script>
   var myData = [
     {
       'id': '1',
       'menuName': '基础管理',
       'menuCode': '10',
       'children': [
         {
           'menuName': '用户管理',
           'menuCode': '11'
         },
         {
           'menuName': '角色管理',
           'menuCode': '12',
           'children': [
             {
               'menuName': '管理员',
               'menuCode': '121'
             },
             {
               'menuName': 'CEO',
               'menuCode': '122',
               'children': [
                 {
                   'menuName': '管理员',
                   'menuCode': '121'
                 },
                 {
                   'menuName': 'CEO',
                   'menuCode': '122'
                 },
                 {
                   'menuName': 'CFO',
                   'menuCode': '123'
                 },
                 {
                   'menuName': 'COO',
                   'menuCode': '124'
                 },
                 {
                   'menuName': '普通人',
                   'menuCode': '124'
                 }
               ]
             },
             {
               'menuName': 'CFO',
               'menuCode': '123'
             },
             {
               'menuName': 'COO',
               'menuCode': '124'
             },
             {
               'menuName': '普通人',
               'menuCode': '124'
             }
           ]
         },
         {
           'menuName': '权限管理',
           'menuCode': '13'
         }
       ]
     },
     {
       'id': '2',
       'menuName': '商品管理',
       'menuCode': ''
     },
     {
       'id': '3',
       'menuName': '订单管理',
       'menuCode': '30',
       'children': [
         {
           'menuName': '订单列表',
           'menuCode': '31'
         },
         {
           'menuName': '退货列表',
           'menuCode': '32',
           'children': []
         }
       ]
     },
     {
       'id': '4',
       'menuName': '商家管理',
       'menuCode': '',
       'children': []
     }
   ];
   import treeMenu from '../../components/Tree/Tree'
   export default {
     components: {
       treeMenu,
     },
     data() {
       return {
         theModel: myData
       }
     }
   }
 </script>