标签：菜单 antdv name 递归 element item setting path icon

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。