Today, the editor will take you to see the dynamic menu from the official website summary
1. Define template
<template>
<a-layout>
<!-- Left navigation -->
<a-layout-sider>
<div>
<a-menu
:inlineIndent="inlineIndent" Menu indentation
:defaultSelectedKeys="[$]" The node selected by default
:openKeys="openKeys" Expanded node
mode="inline" Menu Mode
:inline-collapsed="collapsed" Folding method
@openChange="onOpenChange"
@click="menuClick">
<!-- The beginning of menu traversal -->
<template v-for="item in menuList">
<!-- If the current traversal item does notchildren，Treat as a submenu item，Pay attention to allkeyAllpathUsed for routing hopping，and the currently selected record -->
<a-menu-item v-if="!" :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>
<!-- Otherwise it is considered a submenu，Pass in menu information and use the functional components defined below -->
<sub-menu v-else :key="item.menu_url" :menu-info="item" />
</template>
</a-menu>
</div>
</a-layout-sider>
<!-- content -->
<a-layout-content>
<router-view></router-view>
</a-layout-content>
</a-layout>
</template>
2. Define functional components
// Define functional componentsconst 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=='System Management'" style="font-size:18px;margin-right:5px"/>
<span style="font-size: 15px;">{{ menuInfo.menu_name }}</span>
</span>
<template v-for="item in ">
<a-menu-item v-if="!" :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>
`,
3. Introduce menu components and accept dynamic menu data
import { Menu } from 'ant-design-vue';
name: 'SubMenu',
// true This item must be definedisSubMenu: true,
props: {
// Deconstruct the properties of a-sub-menu, which is why functional components are used mentioned at the beginning of the article ...,
// Receive menu information passed by the parent menuInfo: {
type: Object,
default: () => ({}),
},
},
The dynamic menu data format is as follows:
// Menu datamenuList: [
{
key:'1',
title: 'System Information Management',
path: '/system_infomation_manage',
icon:'iconfont iconshezhiziduan',
children: [
{
key:'2',
title: 'Project Information Management',
path: '/system_base/system_information',
icon:''
},
{
key:'3',
title: 'System Organizational Structure Management',
path: '/system_base/institul_framework',
icon:''
},
{
key:'4',
title: 'System personnel management',
path: '/system_base/personnel_manage',
icon:''
},
{
key:'5',
title: 'System permission management',
path: '/system_base/jurisdiction_manage',
icon:''
},
{
key:'6',
title:'Project Business Dictionary Management',
path:'/system_dictionary_management',
icon:'',
children:[
{
key:'6_1',
title:'Material Equipment Management',
path:'/dictionary_material_manage',
icon:'',
children:[
{
key:'6_1_1',
title:'Material Management',
path:'/system_base/material_manage',
icon:'',
},
{
key:'6_1_2',
title:'Mechanical Equipment Management',
path:'/system_base/machine_manage',
icon:'',
}
]
}
]
}
]
}
],
4. Define other data
// Menu indentinlineIndent:12, // No folding by defaultcollapsed: false, // All parent nodesrootSubmenuKeys: ['/system_infomation_manage'], openKeys: [],//The default expanded nodedefaultOpenKeys:['/system_infomation_manage'], // Selected submenu itemdefaultSelectedKeys: [this.$],
V. Methods involved
methods:{
// Control only one onOpenChange(openKeys) {
// Save the currently opened parent menu into cache ('systemOpenKeys', (openKeys))
const latestOpenKey = (key => (key) === -1);
if ((latestOpenKey) === -1) {
= openKeys;
} else {
= latestOpenKey ? [latestOpenKey] : [];
}
},
// Click the menu and route jump. Note that this function will be triggered when clicking MenuItem menuClick({ item, key, keyPath }) {
// Get the current key and jump this.$({
path: key
})
},
},
created(){
// OpenKeys will be retrieved from cache const openKeys = ('systemOpenKeys')
if(openKeys){
// Existence means assignment = (openKeys)
}else{
= ['/system_infomation_manage']
}
()
},
In this way, a complete dynamic menu is rendered, and the most important step is to define functional components, which is also one of the important ideas of Vue and React frameworks.
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.