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