Ant Design Vue如何生成動(dòng)態(tài)菜單a-menu
更新時(shí)間：2024年01月03日 14:44:37 作者：輕嘆年華逝，
這篇文章主要介紹了Ant Design Vue如何生成動(dòng)態(tài)菜單a-menu問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
今天，小編帶你們看一看從官網(wǎng)總結(jié)來得動(dòng)態(tài)菜單
一、定義template模板
<template>
<a-layout>
<!-- 左側(cè)導(dǎo)航 -->
<a-layout-sider>
<div>
<a-menu
:inlineIndent="inlineIndent" 菜單縮進(jìn)
:defaultSelectedKeys="[$route.path]" 默認(rèn)選中的節(jié)點(diǎn)
:openKeys="openKeys" 展開的節(jié)點(diǎn)
mode="inline" 菜單模式
:inline-collapsed="collapsed" 折疊方式
@openChange="onOpenChange"
@click="menuClick">
<!-- 菜單遍歷的開始 -->
<template v-for="item in menuList">
<!-- 如果當(dāng)前遍歷項(xiàng)沒有children，視為子菜單項(xiàng)，注意所有的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>
<!-- 否則視為子菜單，傳入菜單信息并且運(yùn)用下面定義的函數(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>
`,
三、引入菜單組件及接受動(dòng)態(tài)菜單數(shù)據(jù)
import { Menu } from 'ant-design-vue';
name: 'SubMenu',
// true 此項(xiàng)必須被定義
isSubMenu: true,
props: {
// 解構(gòu)a-sub-menu的屬性，也就是文章開頭提到的為什么使用函數(shù)式組件
...Menu.SubMenu.props,
// 接收父級(jí)傳遞過來的菜單信息
menuInfo: {
type: Object,
default: () => ({}),
},
},
動(dòng)態(tài)菜單數(shù)據(jù)格式如下：
// 菜單數(shù)據(jù)
menuList: [
{
key:'1',
title: '系統(tǒng)信息管理',
path: '/system_infomation_manage',
icon:'iconfont iconshezhiziduan',
children: [
{
key:'2',
title: '項(xiàng)目信息管理',
path: '/system_base/system_information',
icon:''
},
{
key:'3',
title: '系統(tǒng)組織機(jī)構(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:'項(xiàng)目業(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:'機(jī)械設(shè)備管理',
path:'/system_base/machine_manage',
icon:'',
}
]
}
]
}
]
}
],
四、定義其他數(shù)據(jù)
// 菜單縮進(jìn) inlineIndent:12, // 默認(rèn)不折疊 collapsed: false, // 全部父節(jié)點(diǎn) rootSubmenuKeys: ['/system_infomation_manage'], openKeys: [],//默認(rèn)展開的節(jié)點(diǎn) defaultOpenKeys:['/system_infomation_manage'], // 選中的子菜單項(xiàng) defaultSelectedKeys: [this.$route.path],
五、所涉及到的方法
methods:{
// 控制只打開一個(gè)
onOpenChange(openKeys) {
// 將當(dāng)前打開的父級(jí)菜單存入緩存中
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] : [];
}
},
// 點(diǎn)擊菜單，路由跳轉(zhuǎn),注意的是當(dāng)點(diǎn)擊MenuItem才會(huì)觸發(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()
},
這樣，一個(gè)完整的動(dòng)態(tài)菜單就渲染出來了，最重要的一步就是定義函數(shù)式組件，這也是Vue和React框架的重要思想之一。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用Intersection?Observer檢測元素是否展示
Intersection?Observer?是一個(gè)瀏覽器原生的?API,用于異步觀察目標(biāo)元素與其祖先元素或頂部視口之間的交叉狀態(tài)變化,本文就來聊聊如何使用Intersection?Observer檢測元素是否展示吧2024-11-11
Vue中接收二進(jìn)制文件流實(shí)現(xiàn)pdf預(yù)覽的方法
本文主要介紹了Vue中接收二進(jìn)制文件流實(shí)現(xiàn)pdf預(yù)覽的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn)
el-tooltip組件本身就是懸浮提示功能,在對(duì)它進(jìn)行二次封裝時(shí),實(shí)現(xiàn)超出的文本浮現(xiàn),本文就來介紹一下vue+elemen實(shí)現(xiàn)el-tooltip在文本超出區(qū)域后浮現(xiàn),感興趣的可以了解一下2023-12-12
這篇文章主要介紹了Vue中watchEffect的追蹤邏輯,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
在前后端分離項(xiàng)目中,跨域是一定會(huì)出現(xiàn)的問題,下面這篇文章主要給大家介紹了關(guān)于Vue學(xué)習(xí)筆記之跨域的6種解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
elementui源碼學(xué)習(xí)仿寫el-collapse示例
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫el-collapse示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Electron-vue開發(fā)的客戶端支付收款工具的實(shí)現(xiàn)
這篇文章主要介紹了Electron-vue開發(fā)的客戶端支付收款工具的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
解決Element組件的坑:抽屜drawer和彈窗dialog
這篇文章主要介紹了解決Element組件的坑:抽屜drawer和彈窗dialog問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue3+vite動(dòng)態(tài)引入圖片方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁面的示例
今天小編就為大家分享一篇Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁面的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08