<template>
|
<div v-if="item.children">
|
<template v-if="item.children.length == 0">
|
<el-menu-item :index="item.path" >
|
<i class="el-icon-menu"></i>
|
<span>{{item.title}}</span>
|
</el-menu-item>
|
</template>
|
<el-submenu v-else :index="item.path">
|
<template slot="title" >
|
<i class="el-icon-menu"></i>
|
<span>{{item.title}}</span>
|
</template>
|
<template v-for="child in item.children">
|
<navigation-item v-if="child.children&&child.children.length>0"
|
:item="child"
|
:key="child.path"/>
|
<el-menu-item v-else :key="child.path" :index="child.path">
|
<!-- <i class="el-icon-location"></i> -->
|
<span>{{child.title}}</span>
|
</el-menu-item>
|
</template>
|
</el-submenu>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'navigationItem',
|
data () {
|
return {
|
hoverEl: ""
|
}
|
},
|
props: {
|
item: {
|
type: Object,
|
required: true
|
}
|
},
|
methods:{
|
|
}
|
}
|
</script>
|
<style >
|
.el-main {
|
border-right: 0px;
|
}
|
.el-menu-item{
|
text-align: left;
|
}
|
.el-submenu__title{
|
text-align: left;
|
}
|
</style>
|
