```javascript
<template>
<div>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu
:default-active="defaultAct"
active-text-color="#409eff"
class="el-menu-vertical-demo"
>
<template v-for="(item, index) in list">
<!-- 有子菜单的 -->
<el-submenu :index="item.id + ''" :key="index" v-if="item.childList">
<template slot="title">
<span>{{ item.menuName }}</span>
</template>
<el-menu-item-group v-for="(i, key) in item.childList" :key="key">
<el-menu-item :index="i.id + ''">{{ i.menuName }}</el-menu-item>
</el-menu-item-group>
</el-submenu>
<!-- 没有子菜单的 -->
<el-menu-item :index="item.id + ''" v-if="!item.childList" :key="index">
{{ item.menuName }}</el-menu-item
>
</template>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px"> </el-header>
<el-main> </el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
defaultAct: "",
list: [
{
id: 1,
menuName: "首页",
childList: [
{
id: 11,
menuName: "首页1",
},
{
id: 12,
menuName: "首页2",
},
],
},
{
id: 2,
menuName: "参数管理",
childList: [
{
id: 22,
menuName: "参数管理1",
},
],
},
{
id: "3",
menuName: "系统管理",
},
],
};
},
created() {
this.defaultAct = "";
var name = "参数管理";
this.list.forEach((item) => {
//假如激活第一层并且子层存在
if (item.menuName == name && item.childList) {
this.defaultAct = item.childList[0].id + "";
return;
}
//假如激活第一层并且子层不存在
if (item.menuName == name && !item.childList) {
this.defaultAct = item.id + "";
return;
}
if (item.childList) {
item.childList.forEach((ele) => {
if (ele.menuName == name) {
this.defaultAct = ele.id + "";
}
});
}
});
console.log(this.defaultAct);
},
};
</script>
<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
element导航菜单二级菜单
于 2023-01-08 23:10:46 首次发布