目录
1. 需求背景:
需要根据动态生成垂直菜单组件,数据来源的一级菜单可能包含二级子菜单,也可能不包含二级子菜单。难度在于是否包含二级子菜单决定着生成<a-menu-item>组件还是<a-sub-menu>组件,因此给开发带来难度。且vue的模板预览中v-if, v-else等条件判断不能与v-for循环出现在同级标签上。
2. 解决方案:
善用template标签,将v-for循环放在template标签,再将v-if, v-else语句判断是否包含子菜单,决定生成<a-menu-item>还是<a-sub-menu>
3. 代码示例:
template模板
<a-menu
:default-selected-keys="['1']"
:open-keys="openKeys"
mode="inline"
:selected-keys="[current]"
@click="handleClick"
@openChange="onOpenChange"
>
<template v-for="item in menus">
<a-menu-item v-if="!item.children" :key="item.key">
<a-icon style="margin-right: 8px; font-size: 12px" :type="item['icon-type']" />
<span style="font-weight: 500; font-size: 14px">{{ item.label }}</span>
</a-menu-item>
<a-sub-menu v-else :key="item.key">
<div slot="title">
<ops-icon style="margin-right: 8px; font-size: 12px" :type="item['icon-type']" /><span
style="font-weight: 500; font-size: 14px"
>{{ item.label }}</span
>
</div>
<a-menu-item v-for="childItem in item.children" :key="childItem.key">
<a-icon style="margin-right: 8px; font-size: 12px" :type="childItem['icon-type']" />
<span style="font-weight: 500; font-size: 14px">{{ childItem.label }}</span>
</a-menu-item>
</a-sub-menu>
</template>
js代码
data() {
return {
collapsed: false,
current: '1',
rootSubmenuKeys: ['sub1', 'sub2'],
openKeys: ['sub1'],
menus: [
{
key: '1',
'icon-type': 'zhujiqiang',
label: '一级菜单 1',
},
{
key: '2',
'icon-type': 'zhujijiankong',
label: '一级菜单 2',
},
{
key: '3',
'icon-type': 'wangluotuobu',
label: '一级菜单 3',
},
{
key: '4',
'icon-type': 'wodekanban',
label: '一级菜单 4',
},
{
key: 'sub1',
'icon-type': 'wangyexingneng',
label: '一级菜单 5',
children: [
{
key: '5',
'icon-type': 'gailan',
label: '二级菜单 5-1',
},
{
key: '6',
'icon-type': 'xingnengpinggu',
label: '二级菜单 5-2',
},
{
key: '7',
'icon-type': 'yuansuxingneng',
label: '二级菜单 5-3',
},
],
},
{
key: 'sub2',
'icon-type': 'wangzhanjiankong',
label: '二级菜单 6',
children: [
{
key: '8',
'icon-type': 'zonglan',
label: '二级菜单 6-1',
},
{
key: '9',
'icon-type': 'shishizhuangtai',
label: '二级菜单 6-1',
},
{
key: '10',
'icon-type': 'tongji',
label: '二级菜单 6-1',
},
],
},
],
}
methods: {
toggleCollapsed() {
this.collapsed = !this.collapsed
},
handleClick(e) {
console.log('click ', e)
this.current = e.key
},
onOpenChange(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] : []
}
},
},
最终实现效果如下: