- it
- vue elementui以及ant-design-vue menu for循环
elementui
<template
>
<el
-menu
:default-active
="$route.path"
mode
="horizontal"
background
-color
="#2E59D1"
text
-color
="#fff"
active
-text
-color
="#ffd04b"
router
>
<template v
-for="item in menuData">
<el
-menu
-item v
-if="item.children.length === 0" :key
="item.path" :index
="item.path">{{ item
.name
}}</el
-menu
-item
>
<el
-submenu v
-else :key
="item.path" :index
="item.path">
<template slot
="title">{{ item
.name
}}</template
>
<el
-menu
-item v
-for="subItem in item.children" :key
="subItem.path" :index
="subItem.path">{{ subItem
.name
}}</el
-menu
-item
>
</el
-submenu
>
</template
>
</el
-menu
>
</template
>
<script
>
export default {
name
: 'TopMenu',
data() {
return {
menuData
: [
{
name
: '系统首页',
path
: '/home',
children
: []
},
{
path
: '/comprehensive',
name
: '综合展示',
children
: [
{
path
: '/status_monitor',
name
: '状态监控'
},
{
path
: '/warning_monitor',
name
: '监控预警'
}
]
},
{
path
: '/diagnose',
name
: '诊断分析',
children
: []
},
{
path
: '/report_view',
name
: '报表查询',
children
: []
},
{
path
: '/library',
name
: '知识库管理',
children
: []
},
{
path
: '/devOps',
name
: '运维管理',
children
: []
},
{
path
: '/admin',
name
: '系统管理',
children
: [
{
path
: '/company',
name
: '公司管理'
}
]
}
]
}
},
methods
: {}
}
</script
>
ant-design-vue
<template
>
<a
-menu mode
="horizontal" theme
="dark" :default-selected
-keys
="[$route.path]" @click
="eventMenuClick">
<template v
-for="item in menuData">
<a
-menu
-item v
-if="item.children.length === 0" :key
="item.path">{{ item
.name
}}</a
-menu
-item
>
<a
-sub
-menu v
-else :key
="item.path" :title
="item.name">
<a
-menu
-item v
-for="subItem in item.children" :key
="subItem.path">{{ subItem
.name
}}</a
-menu
-item
>
</a
-sub
-menu
>
</template
>
</a
-menu
>
</template
>
<script
>
export default {
name
: 'TopMenu',
data() {
return {
menuData
: [
{
name
: '系统首页',
path
: '/home',
children
: []
},
{
path
: '/comprehensive',
name
: '综合展示',
children
: [
{
path
: '/company_status_monitor',
name
: '状态监控'
},
{
path
: '/warning_monitor',
name
: '监控预警'
}
]
},
{
path
: '/diagnose',
name
: '诊断分析',
children
: []
},
{
path
: '/report_view',
name
: '报表查询',
children
: []
},
{
path
: '/library',
name
: '知识库管理',
children
: []
},
{
path
: '/devOps',
name
: '运维管理',
children
: []
},
{
path
: '/admin',
name
: '系统管理',
children
: [
{
path
: '/company',
name
: '公司管理'
}
]
}
]
}
},
methods
: {
eventMenuClick({ item
, key
, keyPath
}) {
this.$router
.push({
path
: key
})
}
}
}
</script
>
