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>

 

　　子菜单的代码如下

<!-- 子菜单 -->
<template>
    <a-sub-menu :key="menuInfo.path" v-bind="$props" v-on="$listeners">
        <span slot="title">
            <a-icon :type="menuInfo.icon" /><span>{{ menuInfo.name }}</span>
        </span>
        <template v-for="item in menuInfo.children">
            <a-menu-item v-if="!item.children" :key="item.path || item.name" @click='clickMenuTitle(item,element)'>
                <!-- <a-icon type="pie-chart" /> -->
                <span>{{ item.name }}</span>
            </a-menu-item>
            <sub-menu v-else :key="item.path" :menu-info="item" />
        </template>

    </a-sub-menu>
</template>

<script>
import { Menu } from 'ant-design-vue';
export default {
    name: 'SubMenu',
// 必须添加
    isSubMenu: true,
    props:{
        ...Menu.SubMenu.props,
        menuInfo: {
            type: Object,
            default: () => ({}),
        },
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    
    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();
        },
    },
    
}
</script>