快捷導(dǎo)航

Ant Design Vue如何生成動態(tài)菜單a-menu

更新時間：2024年01月03日 14:44:37 作者：輕嘆年華逝，

這篇文章主要介紹了Ant Design Vue如何生成動態(tài)菜單a-menu問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、定義template模板

<template>
    <a-layout>
        <!-- 左側(cè)導(dǎo)航 -->
        <a-layout-sider>
            <div>
                <a-menu
                    :inlineIndent="inlineIndent"   		菜單縮進
                    :defaultSelectedKeys="[$route.path]"  		默認(rèn)選中的節(jié)點
                    :openKeys="openKeys"    		展開的節(jié)點
                    mode="inline"   		菜單模式
                    :inline-collapsed="collapsed"  		折疊方式
                    @openChange="onOpenChange"
                    @click="menuClick">
                    <!-- 菜單遍歷的開始 -->
                    <template v-for="item in menuList">
                        <!-- 如果當(dāng)前遍歷項沒有children，視為子菜單項，注意所有的key都是path用于路由跳轉(zhuǎn)，以及當(dāng)前選中記錄 -->
                        <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>
                        <!-- 否則視為子菜單，傳入菜單信息并且運用下面定義的函數(shù)式組件 -->
                        <sub-menu v-else :key="item.menu_url" :menu-info="item" />
                    </template>
                </a-menu>
            </div>
        </a-layout-sider>
        <!-- 內(nèi)容 -->
        <a-layout-content>
            <router-view></router-view>
        </a-layout-content>
      </a-layout>
</template>

二、定義函數(shù)式組件

// 定義函數(shù)式組件
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=='系統(tǒng)管理'" 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>
    `,

三、引入菜單組件及接受動態(tài)菜單數(shù)據(jù)

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

name: 'SubMenu',
// true 此項必須被定義
isSubMenu: true,
props: {
  // 解構(gòu)a-sub-menu的屬性，也就是文章開頭提到的為什么使用函數(shù)式組件
  ...Menu.SubMenu.props,
  // 接收父級傳遞過來的菜單信息
  menuInfo: {
    type: Object,
    default: () => ({}),
  },
},

動態(tài)菜單數(shù)據(jù)格式如下：

// 菜單數(shù)據(jù)
menuList: [
    {
        key:'1',
        title: '系統(tǒng)信息管理',
        path: '/system_infomation_manage',
        icon:'iconfont iconshezhiziduan',
        children: [
            {
                key:'2',
                title: '項目信息管理',
                path: '/system_base/system_information',
                icon:''
            },
            {
                key:'3',
                title: '系統(tǒng)組織機構(gòu)管理',
                path: '/system_base/institul_framework',
                icon:''
            },
            {
                key:'4',
                title: '系統(tǒng)人員管理',
                path: '/system_base/personnel_manage',
                icon:''
            },
            {
                key:'5',
                title: '系統(tǒng)權(quán)限管理',
                path: '/system_base/jurisdiction_manage',
                icon:''
            },
            {
                key:'6',
                title:'項目業(yè)務(wù)字典管理',
                path:'/system_dictionary_management',
                icon:'',
                children:[
                    {
                        key:'6_1',
                        title:'材料設(shè)備管理',
                        path:'/dictionary_material_manage',
                        icon:'',
                        children:[
                            {
                                key:'6_1_1',
                                title:'材料管理',
                                path:'/system_base/material_manage',
                                icon:'',
                            },
                            {
                                key:'6_1_2',
                                title:'機械設(shè)備管理',
                                path:'/system_base/machine_manage',
                                icon:'',
                            }
                        ]
                    }
                ]
            }
        ]
    }
],

四、定義其他數(shù)據(jù)

// 菜單縮進
inlineIndent:12,
// 默認(rèn)不折疊
collapsed: false,
// 全部父節(jié)點
rootSubmenuKeys: ['/system_infomation_manage'],
openKeys: [],//默認(rèn)展開的節(jié)點
defaultOpenKeys:['/system_infomation_manage'],
// 選中的子菜單項
defaultSelectedKeys: [this.$route.path],

五、所涉及到的方法

methods:{
	//  控制只打開一個
	onOpenChange(openKeys) {
	      // 將當(dāng)前打開的父級菜單存入緩存中
	    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] : [];
	    }
	},
	// 點擊菜單，路由跳轉(zhuǎn),注意的是當(dāng)點擊MenuItem才會觸發(fā)此函數(shù)
	menuClick({ item, key, keyPath }) {
	    // 獲取到當(dāng)前的key,并且跳轉(zhuǎn)
	    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()
},

這樣，一個完整的動態(tài)菜單就渲染出來了，最重要的一步就是定義函數(shù)式組件，這也是Vue和React框架的重要思想之一。