Ant Design Vue生成动态菜单a-menu

一、定义template模板

<template>
    <a-layout>
        <!-- 左侧导航 -->
        <a-layout-sider>
            <div>
                <a-menu
                    :inlineIndent="inlineIndent"   		菜单缩进
                    :defaultSelectedKeys="[$route.path]"  		默认选中的节点
                    :openKeys="openKeys"    		展开的节点
                    mode="inline"   		菜单模式
                    :inline-collapsed="collapsed"  		折叠方式
                    @openChange="onOpenChange"
                    @click="menuClick">
                    <!-- 菜单遍历的开始 -->
                    <template v-for="item in menuList">
                        <!-- 如果当前遍历项没有children，视为子菜单项，注意所有的key都是path用于路由跳转，以及当前选中记录 -->
                        <a-menu-item v-if="!item.children" :key="item.menu_url">
                            <i :class="item.menu_icon" style="font-size:18px;margin-right:5px"/>
                            <span style="font-size: 15px;">{{ item.menu_name }}</span>
                        </a-menu-item>
                        <!-- 否则视为子菜单，传入菜单信息并且运用下面定义的函数式组件 -->
                        <sub-menu v-else :key="item.menu_url" :menu-info="item" />
                    </template>
                </a-menu>
            </div>
        </a-layout-sider>
        <!-- 内容 -->
        <a-layout-content>
            <router-view></router-view>
        </a-layout-content>
      </a-layout>
</template>

二、定义函数式组件

// 定义函数式组件
const SubMenu = {
  template: `
    <a-sub-menu :key="menuInfo.menu_url" v-bind="$props" v-on="$listeners">
        <span slot="title">
          <i class="iconfont iconshezhiziduan" v-if="menuInfo.menu_name=='系统管理'" style="font-size:18px;margin-right:5px"/>
          <span style="font-size: 15px;">{{ menuInfo.menu_name }}</span>
        </span>
        <template v-for="item in menuInfo.children">
          <a-menu-item v-if="!item.children" :key="item.menu_url">
            <i :class="item.menu_icon" style="font-size:18px;margin-right:5px"/>
            <span style="font-size: 15px;">{{ item.menu_name }}</span>
          </a-menu-item>
          <sub-menu v-else :key="item.menu_url" :menu-info="item" />
        </template>
    </a-sub-menu>
    `,

三、引入菜单组件及接受动态菜单数据

import { Menu } from 'ant-design-vue';

name: 'SubMenu',
// true 此项必须被定义
isSubMenu: true,
props: {
  // 解构a-sub-menu的属性，也就是文章开头提到的为什么使用函数式组件
  ...Menu.SubMenu.props,
  // 接收父级传递过来的菜单信息
  menuInfo: {
    type: Object,
    default: () => ({}),
  },
},

动态菜单数据格式如下

// 菜单数据
menuList: [
    {
        key:'1',
        title: '系统信息管理',
        path: '/system_infomation_manage',
        icon:'iconfont iconshezhiziduan',
        children: [
            {
                key:'2',
                title: '项目信息管理',
                path: '/system_base/system_information',
                icon:''
            },
            {
                key:'3',
                title: '系统组织机构管理',
                path: '/system_base/institul_framework',
                icon:''
            },
            {
                key:'4',
                title: '系统人员管理',
                path: '/system_base/personnel_manage',
                icon:''
            },
            {
                key:'5',
                title: '系统权限管理',
                path: '/system_base/jurisdiction_manage',
                icon:''
            },
            {
                key:'6',
                title:'项目业务字典管理',
                path:'/system_dictionary_management',
                icon:'',
                children:[
                    {
                        key:'6_1',
                        title:'材料设备管理',
                        path:'/dictionary_material_manage',
                        icon:'',
                        children:[
                            {
                                key:'6_1_1',
                                title:'材料管理',
                                path:'/system_base/material_manage',
                                icon:'',
                            },
                            {
                                key:'6_1_2',
                                title:'机械设备管理',
                                path:'/system_base/machine_manage',
                                icon:'',
                            }
                        ]
                    }
                ]
            }
        ]
    }
],

四、定义其他数据

// 菜单缩进
inlineIndent:12,
// 默认不折叠
collapsed: false,
// 全部父节点
rootSubmenuKeys: ['/system_infomation_manage'],
openKeys: [],//默认展开的节点
defaultOpenKeys:['/system_infomation_manage'],
// 选中的子菜单项
defaultSelectedKeys: [this.$route.path], 

五、所涉及到的方法

methods:{
	//  控制只打开一个
	onOpenChange(openKeys) {
	      // 将当前打开的父级菜单存入缓存中
	    window.localStorage.setItem('systemOpenKeys', JSON.stringify(openKeys))
	    const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
	    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
	        this.openKeys = openKeys;
	    } else {
	        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
	    }
	},
	// 点击菜单，路由跳转,注意的是当点击MenuItem才会触发此函数
	menuClick({ item, key, keyPath }) {
	    // 获取到当前的key,并且跳转
	    this.$router.push({
	        path: key
	    })
	},
},
created(){
    // 将从缓存中取出openKeys
    const openKeys = window.localStorage.getItem('systemOpenKeys')
    if(openKeys){
        // 存在即赋值
        this.openKeys = JSON.parse(openKeys)
    }else{
        this.openKeys = ['/system_infomation_manage']
    }
    this.getSystemPermission()
},

这样，一个完整的动态菜单就渲染出来了，最重要的一步就是定义函数式组件，这也是Vue和React框架的重要思想之一。