图片来源网络
Element-ui和Vue Router不知道的自行谷歌哈
先来看下怎么样动态加载nav导航
html代码
<el-menu :default-active="$router.path" router class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<label v-for="(item,index) in navData" :key="index">
<el-menu-item :index=item.url>
<i :class=item.icon></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</label>
</el-menu>
js模拟从后台获取的导航数据
navData: [
{
name: "ECharts",
url: "/Echarts",
icon: "el-icon-menu"
},
{
name: "菜单选项2",
url: "2",
icon: "el-icon-tickets"
},
{
name: "菜单选项3",
url: "3",
icon: "el-icon-message"
},
{
name: "菜单选项4",
url: "4",
icon: "el-icon-phone-outline"
},
{
name: "菜单选项5",
url: "5",
icon: "el-icon-star-off"
},
{
name: "菜单选项6",
url: "6",
icon: "el-icon-setting"
}
]
实现效果
截图
复杂导航生成（包含二级菜单和三级菜单）
html代码
<el-menu class="el-menu-vertical-demo" @select="handleOpen" :collapse="isCollapse">
<label v-for="(item,index) in listNav" :key="index">
<label v-for="(itemR,indexR) in item.extopts" :key="indexR">
<label v-for="(iconitem2,iconIndex2) in (indexR).match(/(\S*)@@/)" :key="iconIndex2">
<label v-if="iconIndex2 > 0">
<el-menu-item :url="item.url" :index=iconitem2 v-if="item.items.length == 0">
<label v-for="(iconitem1,iconIndex1) in (indexR).match(/@@(\S*)/)" :key="iconIndex1">
<label v-if="iconIndex1 > 0">
<i :class=iconitem1></i>
</label>
</label>
<span slot="title">{{ item.text}}{{iconitem2}}</span>
</el-menu-item>
<el-submenu :index=iconitem2 v-else>
<template slot="title">
<label v-for="(iconitem3,iconIndex3) in (indexR).match(/@@(\S*)/)" :key="iconIndex3">
<label v-if="iconIndex3 > 0">
<i :class=iconitem3></i>
</label>
</label>
<span slot="title" v-show="false">{{ item.text}}{{iconitem2}}111</span>
</template>
<label v-for="(item1,index1) in item.items" :key="index1">
<label v-for="(itemR1,indexR1) in item1.extopts" :key="indexR1">
<el-menu-item :url="item1.url" :index=indexR1 v-if="item1.items.length == 0">{{item1.text}}{{indexR1}}</el-menu-item>
<el-submenu :index=indexR1 v-else>
<template slot="title">{{item1.text}}{{indexR1}}</template>
<label v-for="(item2,index2) in item1.items" :key="index2">
<label v-for="(itemR2,indexR2) in item2.extopts" :key="indexR2">
<el-menu-item :url="item2.url" :index=indexR2>{{item2.text}}{{indexR2}}</el-menu-item>
</label>
</label>
</el-submenu>
</label>
</label>
</el-submenu>
</label>
</label>
</label>
</label>
</el-menu>
js模拟从后台获取的导航数据
listNav: [
{
name: "dldt",
text: "地理地图",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/dldt@@el-icon-location": "" },
items: [],
outter: false
},
{
name: "jccx",
text: "基础查询",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/jccx@@el-icon-search": "" },
items: [
{
name: "cxdw",
text: "查询定位",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/cxdw": "" },
items: [
{
name: "dwcx",
text: "定位查询",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/dwcx": "" },
items: [],
outter: false
},
{
name: "dlzhcx",
text: "电缆综合查询",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/dlzhcx": "" },
items: [],
outter: false
},
{
name: "scfzsszhcx",
text: "生产辅助设施综合查询",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/scfzsszhcx": "" },
items: [],
outter: false
},
{
name: "tdzhcx",
text: "通道综合查询",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/tdzhcx": "" },
items: [],
outter: false
},
{
name: "tdnxcx",
text: "通道年限查询",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/tdnxcx": "" },
items: [],
outter: false
},
{
name: "jhcx",
text: "几何查询",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/jhcx": "" },
items: [],
outter: false
}
],
outter: false
},
{
name: "dlzycxfx",
text: "电缆资源查询分析",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/dlzycxfx": "" },
items: [
{
name: "dlmspmcx",
text: "电缆埋设剖面查询",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/dlmspmcx": "" },
items: [],
outter: false
},
{
name: "dljpmtcx",
text: "电缆井剖面图查询",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/dljpmtcx": "" },
items: [],
outter: false
}
],
outter: false
},
{
name: "txsc",
text: "图形输出",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/txsc": "" },
items: [
{
name: "dqtfdy",
text: "当前图幅打印",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/dqtfdy": "" },
items: [],
outter: false
},
{
name: "lkdy",
text: "拉框打印",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/lkdy": "" },
items: [],
outter: false
}
],
outter: false
}
],
outter: false
},
{
name: "ywgl",
text: "业务管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/ywgl@@el-icon-tickets": "" },
items: [
{
name: "zzbd",
text: "政治保电",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/zzbd": "" },
items: [
{
name: "bdrwd",
text: "保电任务单",
url: "http://10.156.121.38:9000/gwUap",
extopts: {
"/BusinessManagement/politicalProtection/protectTacks/protectTack":
""
},
items: [],
outter: false
}
],
outter: false
},
{
name: "gzt",
text: "工作台",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/gzt": "" },
items: [],
outter: false
},
{
name: "dmgl",
text: "断面管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/dmgl": "" },
items: [],
outter: false
},
{
name: "jhgl",
text: "计划管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/jhgl": "" },
items: [],
outter: false
},
{
name: "xsjcgl",
text: "巡视检测管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/xsjcgl": "" },
items: [],
outter: false
},
{
name: "yhgl",
text: "隐患管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/yhgl": "" },
items: [],
outter: false
},
{
name: "fxgk",
text: "风险管控",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/fxgk": "" },
items: [],
outter: false
},
{
name: "qxgl",
text: "缺陷管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/qxgl": "" },
items: [],
outter: false
},
{
name: "gzgl",
text: "故障管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/gzgl": "" },
items: [],
outter: false
},
{
name: "yxztpj",
text: "运行状态评价",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/yxztpj": "" },
items: [],
outter: false
},
{
name: "gcjsgl",
text: "工程建设管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/gcjsgl": "" },
items: [],
outter: false
}
],
outter: false
},
{
name: "jkzz",
text: "监控主站",
url: "http://10.156.121.38:9000/gwUap/Monitoring",
extopts: { "/jkzz@@el-icon-view": "" },
items: [],
outter: false
},
{
name: "znxj",
text: "智能巡检",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/Polling@@el-icon-sort": "" },
items: [],
outter: false
},
{
name: "tjfx",
text: "统计分析",
url: "http://10.156.121.38:9000/gwUap/Statistics",
extopts: { "/tjfx@@el-icon-edit": "" },
items: [],
outter: false
},
{
name: "zhxx",
text: "综合信息",
url: "http://10.156.121.38:9000/gwUap/Synthesize",
extopts: { "/zhxx@@el-icon-document": "" },
items: [],
outter: false
},
{
name: "zbkb",
text: "指标看板",
url: "http://10.156.121.38:9000/gwUap/Board",
extopts: { "/zbkb@@el-icon-news": "" },
items: [],
outter: false
},
{
name: "ztt",
text: "专题图",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/ztt@@el-icon-picture-outline": "" },
items: [
{
name: "jkfb",
text: "监控分布",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/jkfb": "" },
items: [],
outter: false
},
{
name: "jkgj",
text: "监控警告",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/jkgj": "" },
items: [],
outter: false
},
{
name: "tdzyl",
text: "通道占用率",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/tdzyl": "" },
items: [],
outter: false
},
{
name: "tdfj",
text: "通道分级",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/tdfj": "" },
items: [],
outter: false
},
{
name: "gcjsgl",
text: "工程建设管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/gcjsgl": "" },
items: [],
outter: false
},
{
name: "yhgl",
text: "隐患管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/yhgl": "" },
items: [],
outter: false
}
],
实现效果
截图
截图
这个动态生成的复杂导航因为有些测试需要做，所以菜单名字就一直没有改，不影响实现效果
没看明白或者是有更好方法的小伙伴们可以私信我
这里卿洋
愿喜❤️
