由于本人近期开始学习使用vue搭建一个后端管理系统的前端项目，在左侧生成菜单树的时候遇到了一些问题。在这里记录下
分析：由于本人设定的菜单可以使多级结构，直接使用vue的v-for 遍历并不是很方便。那么这里采用递归的方式进行菜单树的生成
1.首先在使用vue-cli生成的项目中，在components下新建一个menu.vue组件。
menu.vue的内容为：
1 <template> 2 <div class="wMenu"> 3 <label v-for="(menu, index) in menuList"> 4 5 <el-submenu v-if="menu.havingChild" :index="menu.id"> 6 <template slot="title"> 7 <i :class="menu.icon"></i> 8 <span slot="title">{{ menu.menuName }}</span> 9 </template> 10 <wMenu :menuList="menu.children"></wMenu> 11 </el-submenu> 12 13 <el-menu-item v-if="!menu.havingChild" :index="menu.id"> 14 <i :class="menu.icon"></i> 15 <span slot="title">{{ menu.menuName }}</span> 16 </el-menu-item> 17 </label> 18 </div> 19 </template> 20 21 <script> 22 export default { 23 name: 'wMenu', 24 props: ['menuList'], 25 data () { 26 return { 27 } 28 }, 29 methods: { 30 getMenuSize() { 31 return this.menuList.length; 32 } 33 } 34 } 35 </script> 36 37 <!-- Add "scoped" attribute to limit CSS to this component only --> 38 <style scoped> 39 40 </style>