<template>
<!--实现左侧导航条动态渲染(三级)-->
<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router unique-opened
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="/home/main">
<i class="el-icon-document"></i>
<span slot="title">首页</span>
</el-menu-item>
<el-submenu v-for="(item,index) in content" :key="item.id" :data="item" v-if="item.children.length>0&&item.level==1" :index="item.linkname">
<template slot="title">
<i class="el-icon-location"></i>
<span slot="title">{{item.linkname}}</span>
</template>
<el-submenu v-for="(child,seq) in item.children" :data="child" v-if="item.id==child.parentid&&child.children.length>0&&child.level==2" :key="child.id" :index="child.linkname">
<span slot="title">{{child.linkname}}</span>
<el-menu-item v-for="three in child.children" :data="three" v-if="child.id==three.parentid&&child.children.length!=0&&three.level==3" :key="three.id" :index="three.link">
<span slot="title">{{three.linkname}}</span>
</el-menu-item>
</el-submenu>
<!--2无子级显示-->
<el-menu-item v-for="(child,seq) in item.children" :data="child" v-if="item.id==child.parentid&&child.children.length==0&&child.level==2" :key="child.id" :index="child.link">
<span slot="title">{{child.linkname}}</span>
</el-menu-item>
</el-submenu>
<!--1无子级显示且不支持点击事件-->
<el-menu-item v-for="(item,index) in content" :key="item.id" :data="item" v-if="item.children.length==0&&item.level==1" :index="item.linkname" :disabled="item.children.length==0 ? true : false ">
<i class="el-icon-setting"></i>
<span slot="title">{{item.linkname}}</span>
</el-menu-item>
</el-menu>
</div>
</template>
<script>
import axios from "axios";
import $ from 'jquery';
export default {
data() {
return {
content: [],
isCollapse: false,
defaultProps: {
children: 'children',
label: 'linkname'
}
};
},
mounted(){
var _self = this;
axios.get('https://5b90a18b3ef10a001445d08e.mockapi.io/api/v1/resources')
.then(function (response) {
_self.content = returnZhData(response.data);
})
.catch(function (error) {
console.log(error);
});
},
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
handleNodeClick(content) {
console.log(content);
}
}
}
function returnZhData(data){
var arrone=[];
$.each(data, function(index,one) {
if(one['level'] == 1){
arrone.push(one);
var arrtwo=[];
$.each(data, function(index,two) {
if(two['level'] == 2 && two['parentid']==one['id']){
arrtwo.push(two);
var arrthree=[];
$.each(data, function(index,three) {
if(three['level'] == 3 && three['parentid']==two['id']){
arrthree.push(three);
}
});
two.children=arrthree;
}
});
one.children = arrtwo;
}
});
return arrone;
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: auto;
min-height: 400px;
}
</style>
导航菜单（二）
<template>
<el-aside class="base-aside" width="240px" :class="{'menu-has-fold': !menuShow}">
<el-menu
style="width: 100%;"
:default-active="activeParent"
class="el-menu-vertical-demo"
unique-opened
active-text-color="#5264d9"
@select="handleSelectMenu"
@open="handleOpen"
@close="handleClose">
<elem-menu-child :list="menuOpen" :origin="menuOpen"></elem-menu-child>
</el-menu>
</el-aside>
</template>
<script>
import Vue from 'vue';
Vue.component('ElemMenuChild', {
props: {
list: [],
origin: []
},
computed: {
},
watch: {
},
created() {
},
methods: {
},
template: `<div><template v-for="menu in list">
<el-submenu v-if="menu.children && menu.children.length" :key="menu.MenuId" :index="menu.path+''">
<template slot="title">
<i class="iconfont space-icon" :class="menu.iconSvg]"></i>
<span>{{ menu.title }}</span>
</template>
<elem-menu-child :list="menu.children" :origin="origin"></elem-menu-child>
</el-submenu>
<el-menu-item v-else :key="menu.MenuId" :index="menu.path+''">
<i class="iconfont space-icon" :class="menu.iconSvg"></i>
<span slot="title">{{ menu.title }}</span>
</el-menu-item>
</template></div>`
});
export default {
name: "NavMenu",
props:{
menu:{
type:Array,
default: () => []
}
},
data() {
const self = this;
return {
m: {},
menuOpen: (function() {
const menu = self.menu.slice();
return menu.map(v => {
if(v.children && v.children.length) {
v.hasChild = true;
v.path = v.path ? v.path : v.MenuCode + '-index';
v.children.map(item => {
if(item.children && item.children.length) {
item.hasChild = true;
v.path = v.path ? v.path : v.MenuCode + '-index';
}
return item;
})
}
return v;
})
})(),
menuShow: true,
defaultActive: null
}
},
created() {
},
mounted() {
},
computed: {
activeParent() {
let path = this.$route.path;
return path;
},
},
methods: {
handleOpen() {},
handleClose() {},
handleSelectMenu(menuPath, p) {
this.$router.push({ path: menuPath });
},
recurrenceFunction(list, compareValue, result) {
list.map((item, index) => {
item.path && (compareValue === item.path) && (result = item);
if (item.children && item.children.length) {
this.recurrenceFunction(item.children, compareValue, result);
}
})
},
}
}
</script>
<style lang="less" scoped>
/deep/.el-menu-item{
border-left: 5px solid #ffffff;
padding: 0 25px;
}
/deep/.el-menu-item.is-active{
border-left: 5px solid #5264d9;
color: #5264d9;
background-color: #ebeef5;
}
/deep/.el-submenu.is-active .el-submenu__title{
color: #5264d9;
}
</style>
<style lang="less">
p{
padding: 0;
margin: 0;
}
.submenu-active{
color: #5264d9;
}
</style>
