Element plus NavMenu 导航菜单使用
程序员文章站
2022-06-06 23:37:23
...
<el-menu
:default-active="active"
class="sidebar-menu"
background-color="#f9f9f9"
text-color="#565656"
unique-opened
router
active-text-color="#0079fe"
:collapse="isCollapse"
@select="handleSelect">
<template v-for="item in menuList">
<template v-if="item.children&&item.level==0">
<el-submenu :index="String(item.id)" :key="item.id">
<template #title>
<i class="el-icon-s-order" style="margin-right: 5px;font-size:20px;"></i>
<span>{{ item.menuName }}</span>
</template>
<el-menu-item v-for="(items, i) in item.children" :key="i" :index="items.menuUrl" :route="`/${items.menuUrl}`" :to="items.id" >
{{items.menuName}}
</el-menu-item>
</el-submenu>
</template>
<template v-else>
<template v-if="item.children&&item.level==0">
<el-submenu :index="String(item.id)" :key="item.id">
<template #title>
<i class="el-icon-s-order" style="margin-right: 5px;font-size:20px;"></i>
<span>{{ item.menuName }}</span>
</template>
<el-menu-item v-for="(items, i) in item.children" :key="i" :index="items.menuUrl" :route="`/${items.menuUrl}`" :to="items.id" >
{{items.menuName}}
</el-menu-item>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.menuUrl" :route="`/${item.menuUrl}`" :key="item.id" :to="item.id">
{{item.menuName}}
</el-menu-item>
</template>
</template>
</template>
</el-menu>
这里面主要是 :default-active=“active” 这句话非常重要 active
:route="/${items.menuUrl}
" 需要跟active里的值相等
例如:http://localhost:8081/inquiryDisposal
active = inquiryDisposal
route = “inquiryDisposal”
上一篇: PHP实现简单爬虫的方法,php实现爬虫