圖片來源網(wǎng)絡(luò)
Element-ui和Vue Router不知道的自行谷歌哈
先來看下怎么樣動態(tài)加載nav導(dǎo)航
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模擬從后臺獲取的導(dǎo)航數(shù)據(jù)
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"
}
]
實現(xiàn)效果
截圖
復(fù)雜導(dǎo)航生成（包含二級菜單和三級菜單）
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模擬從后臺獲取的導(dǎo)航數(shù)據(jù)
listNav: [
{
name: "dldt",
text: "地理地圖",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/dldt@@el-icon-location": "" },
items: [],
outter: false
},
{
name: "jccx",
text: "基礎(chǔ)查詢",
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: "生產(chǎn)輔助設(shè)施綜合查詢",
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: "電纜埋設(shè)剖面查詢",
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: "當(dāng)前圖幅打印",
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: "業(yè)務(wù)管理",
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: "保電任務(wù)單",
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: "風(fēng)險管控",
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: "運行狀態(tài)評價",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/yxztpj": "" },
items: [],
outter: false
},
{
name: "gcjsgl",
text: "工程建設(shè)管理",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/gcjsgl": "" },
items: [],
outter: false
}
],
outter: false
},
{
name: "jkzz",
text: "監(jiān)控主站",
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: "統(tǒng)計分析",
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: "監(jiān)控分布",
url: "http://10.156.121.38:9000/gwUap",
extopts: { "/jkfb": "" },
items: [],
outter: false
},
{
name: "jkgj",
text: "監(jiān)控警告",
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: "工程建設(shè)管理",
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
}
],
實現(xiàn)效果
截圖
截圖
這個動態(tài)生成的復(fù)雜導(dǎo)航因為有些測試需要做涛救，所以菜單名字就一直沒有改忆植，不影響實現(xiàn)效果
沒看明白或者是有更好方法的小伙伴們可以私信我
這里卿洋
愿喜??
