前言
一、动态生成
二、代码
<template>
<div style="width: 256px">
<a-button @click="toggleCollapsed" style="margin-bottom: 16px" type="primary">
<a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"/>
</a-button>
<a-menu
:default-open-keys="['home']"
:default-selected-keys="['home']"
:inline-collapsed="collapsed"
mode="inline"
theme="dark"
>
<template v-for="item in menuList">
<a-menu-item :key="item.key">
<router-link :to="item.path">
<a-icon :type="item.type"/>
<span>{{ item.title }}</span>
</router-link>
</a-menu-item>
</template>
<template v-for="item in subMenuList">
<a-sub-menu :key="item.key">
<span slot="title"><a-icon :type="item.type"/><span>{{item.title}}</span></span>
<template v-for="sub in item.children">
<a-menu-item :key="sub.key">
<router-link :to="sub.path">
{{sub.title}}
</router-link>
</a-menu-item>
</template>
</a-sub-menu>
</template>
</a-menu>
</div>
</template>
<script>
import req from '@/utils/request'
export default {
components: {},
created() {
this.getData()
},
data() {
return {
collapsed: false,
menuList: [],
subMenuList: []
}
},
methods: {
getData() {
req.get('/menu.json').then(res => {
console.log(res.data)
this.menuList = res.data.menuItems
this.subMenuList = res.data.subItems
})
},
toggleCollapsed() {
this.collapsed = !this.collapsed
},
},
}
</script>
{
"menuItems": [
{
"key": "home",
"type": "md-home",
"title": "主页",
"path": "/"
},
{
"key": "fuye",
"type": "md-home",
"title": "附页",
"path": "/fuye"
}
],
"subItems": [
{
"title": "二级菜单1",
"key": "21",
"type": "ios-paper",
"children": [
{
"key": "t1",
"type": "ios-grid",
"title": "表格",
"path": ""
},
{
"key": "msg",
"type": "ios-notifications-outline",
"title": "查看消息",
"path": ""
}
]
},
{
"title": "二级菜单2",
"key": "22",
"type": "ios-paper",
"children": [
{
"key": "password",
"type": "md-lock",
"title": "修改密码",
"path": ""
},
{
"key": "userInfo",
"type": "md-person",
"title": "基本资料",
"path": ""
}
]
}
]
}
总结
- 2020-11-18 16:54:50
动态生成菜单项,后面会继续增加动态创建路由