Ant Design Vue生成动态菜单a-menu
今天，小编带你们看一看从官网总结来得动态菜单
- 一、定义template模板
- 二、定义函数式组件
- 三、引入菜单组件及接受动态菜单数据
- 四、定义其他数据
- 五、所涉及到的方法
一、定义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">
<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: `
{
{ menuInfo.menu_name }}
{
{ item.menu_name }}
`,
三、引入菜单组件及接受动态菜单数据
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框架的重要思想之一。