回调形成树形结构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>