一般的后台系统都有一个树形导航菜单，具体实现如下，主要参考
https://my.oschina.net/u/4131669/blog/3048416
1、定义sub-menu组件，用于递归显示多级菜单
<template functional> <a-sub-menu :key="props.menuInfo.key" > <span slot="title"> <a-icon type="mail" /><span>{{ props.menuInfo.title }}</span> </span> <template v-for="item in props.menuInfo.children"> <a-menu-item v-if="!item.children" :key="item.key" > <a-icon type="pie-chart" /> <span>{{ item.title }}</span> </a-menu-item> <sub-menu v-else :key="item.key" :menu-info="item" /> </template> </a-sub-menu> </template> <script> export default { props: [‘menuInfo‘], }; </script>
template functional标志该组件为函数化组件
2、在Mainfrm中引入组件
import SubMenu from ‘./SubMenu‘
components: {
SubMenu
}
<template v-for="item in menuList"> <a-menu-item v-if="!item.sidebars.length" :key="item.name"> <a-icon :type="item.iconType" /> <span>{{item.name}}</span> </a-menu-item> <sub-menu v-else :menu-info="item" :key="item.name"/> </template>
getmenu () { let that = this this.axios( { method:"get", url:‘/api/getmenu‘, headers: { ‘Content-Type‘:‘application/json;charset=UTF-8‘ } }) .then((response) => { this.menus=response.data.data; console.log(response) }) .catch(function (error) { console.log(error) }) },
5、menus在data中定义
data () { return { menus:[] } },
6、最终实现效果如下
原文：https://www.cnblogs.com/zhaogaojian/p/11101909.html