antdv 使用单文件方式递归生成菜单

antv生成多级菜单代码如下

<template>
    <a-menu mode="inline" :defaultSelectedKeys="['child00']" :openKeys="openKeys"
                    @openChange="onOpenChange" >
                    <template v-for='(item,index) in leftMenuData'>
                        <a-menu-item v-if="!item.children" :key='"main"+index' @click='clickMenuTitle(item)'>
                            <span>{{ item.name }}</span>
                        </a-menu-item>
                        <sub-menu v-else :key='"main0"+index' :menu-info="item" />
                    </template>
                </a-menu>

</template>
<script>
  
import SubMenu from "@c/subMenu/Index.vue"; 
data(){
     return {
            leftMenuData: [
                {
                    name: '项目及常用代码', path: '1', icon: 'setting', children: [
                        { name: '项目列表', path: 'projectList' },
                    ]
                },
                {
                    name: '组件封装', path: '2', icon: 'setting', children: [
                        {name: '图表组件', path: '2-1', icon: 'setting', children: [
                            { name: '雷达图', path: 'radar' },]
                        },
                        {name: '组件封装', path: '2-2', icon: 'setting', children: [
                            {name:'卡片',path:'cardShow',icon:'setting',}]
                        }
                    ]
                },
            ],
    }
} 

methods: {
    clickMenuTitle(item, element) {//路由跳转，面包屑设置
            if (element && element.path !== '' || item.path !== '') {
                this.$router.push({ name: element ? element.path : item.path });
            } else {
                this.$message.error('快马加班赶制中！')
            }
            this.reload();
   },
//点击菜单可以刷新当前页面
        reload() {
            this.isRouterAlive = false
            this.$nextTick(() => (this.isRouterAlive = true))
        }
}
 
</script>

　　子菜单的代码如下

 1 <!-- 子菜单 -->
 2 <template>
 3     <a-sub-menu :key="menuInfo.path" v-bind="$props" v-on="$listeners">
 4         <span slot="title">
 5             <a-icon :type="menuInfo.icon" /><span>{{ menuInfo.name }}</span>
 6         </span>
 7         <template v-for="item in menuInfo.children">
 8             <a-menu-item v-if="!item.children" :key="item.path || item.name" @click='clickMenuTitle(item,element)'>
 9                 <!-- <a-icon type="pie-chart" /> -->
10                 <span>{{ item.name }}</span>
11             </a-menu-item>
12             <sub-menu v-else :key="item.path" :menu-info="item" />
13         </template>
14 
15     </a-sub-menu>
16 </template>
17 
18 <script>
19 import { Menu } from 'ant-design-vue';
20 export default {
21     name: 'SubMenu',
22 // 必须添加
23     isSubMenu: true,
24     props:{
25         ...Menu.SubMenu.props,
26         menuInfo: {
27             type: Object,
28             default: () => ({}),
29         },
30     },
31     //监听属性 类似于data概念
32     computed: {},
33     //监控data中的数据变化
34     watch: {},
35     
36     methods: {
37         clickMenuTitle(item, element) {//路由跳转，面包屑设置
38             if (element && element.path !== '' || item.path !== '') {
39                 this.$router.push({ name: element ? element.path : item.path });
40             } else {
41                 this.$message.error('快马加班赶制中！')
42             }
43             this.reload();
44         },
45     },
46     
47 }
48 </script>
49

标签：菜单,antdv,name,递归,element,item,setting,path,icon
来源： https://www.cnblogs.com/sllzhj/p/14182987.html