element 导航实现基于elemenet实现使用前请确保已成功引入
html 部分
<!--侧边栏菜单-->
<el-menu background-color="inherit" text-color="#fff" active-text-color="#fff" unique-opened :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath">
<template v-for="item in menuList">
<el-submenu :index="item.menuId" :key="item.menuId" v-if="!item.actionName">
<!--一级菜单的模板区域-->
<template slot="title">
<!--图标-->
<i :class="iconStyle(item.menuName)"></i>
<!--文本-->
<span>{{ item.menuName }}</span>
</template>
<!--二级菜单-->
<el-menu-item :index="subItem.actionName" v-for="subItem in item.menuList" :key="subItem.menuId" @click="saveNavState(subItem.actionName)">
<template slot="title">
<!--图标-->
<i class="el-icon-s-operation"></i>
<!--文本-->
<span>{{ subItem.menuName }}</span>
</template>
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="item.actionName" :key="item.menuId" @click="saveNavState(item.actionName)">
<template slot="title">
<!--图标-->
<i class="el-icon-s-home" style="color:#fff"></i>
<!--文本-->
<span>{{ item.menuName }}</span>
</template>
<router-link :to="'/Main'" v-show="isCollapse"><i class="el-icon-s-home" style="color:#fff"></i></router-link>
</el-menu-item>
</template>
</el-menu>
js 部分
data() {
return {
menuList: [],
}
},
created() {
// 引入本地json 数据
var goodsData = require( './data.json' )
this.menuList = goodsData
},
data 文件
[
{
"actionName":"Main",
"menuId": "QLJY_Main",
"menuName": "首页",
" parentMenuId": "BS_ROOT",
" webSiteId": "QLJY"
},
{
" menuId": "QLJY_SysMGT",
"menuList": [
{
"actionName": "OrgMGT",
"menuId": "QLJY_OrgMGT",
"menuName": "组织管理",
"parentMenuId": "QLJY_SysMGT",
"webSiteId": "QLJY"
},
{
"actionName": "RoleMGT",
"menuId": "QLJY_RoleMGT",
"menuName": "小姐姐啊",
"parentMenuId": "QLJY_SysMGT",
" webSiteId": "QLJY"
}
],
"menuName": "系统管理",
"parentMenuId": "BS_ROOT",
"webSiteId": "QLJY"
}
]