Ant Design Vue生成動態菜單a-menu

今天，小編帶大家看一看從官網總結來得動態菜單

• 1、定義template模板
• 2、定義函數式組件
• 3、引入菜單組件及接受動態菜單數據
• 4、定義其餘數據
• 5、所涉及到的方法

1、定義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>

2、定義函數式組件

// 定義函數式組件
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> `,

3、引入菜單組件及接受動態菜單數據

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:'',
                            }
                        ]
                    }
                ]
            }
        ]
    }
],

4、定義其餘數據

// 菜單縮進
inlineIndent:12,
// 默認不折疊
collapsed: false,
// 所有父節點
rootSubmenuKeys: ['/system_infomation_manage'],
openKeys: [],//默認展開的節點
defaultOpenKeys:['/system_infomation_manage'],
// 選中的子菜單項
defaultSelectedKeys: [this.$route.path],

5、所涉及到的方法

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框架的重要思想之一。