这是自己项目的经历,真是很复杂!!!大概记录一下代码的逻辑
可以无限添加el-submenu 和el-menu-item
<
template
>
<
div
class=
'leftList'
style=
' overflow:auto'
>
<
el-aside
width=
"99%"
style=
"background-color:#2c3e50;"
>
<
div
id=
'leftAside'
>
<
el-menu
:default-active="
menuActive"
class=
"el-menu-vertical-demo"
@open="
handleOpen"
@close="
handleClose"
:default-openeds="
cacheMenu"
background-color=
"#2C3E50"
text-color=
"#fff"
active-text-color=
"#ffd04b"
>
<
el-submenu
index=
"1"
>
<
template
slot=
"title"
>
<
i
class=
"el-icon-location"
></
i
>
<
span
>Account
</
span
>
</
template
>
<
el-menu-item
index=
"1-1"
>
<
i
class=
"el-icon-tickets"
></
i
>
<
span
v-on:click="
getuserinfo"
>User Profiles
</
span
>
</
el-menu-item
>
</
el-submenu
>
<
el-submenu
index=
"2"
@click.stop.native="
selectmanage(
'2',
'Device Management',
'2')"
>
<
template
slot=
"title"
>
<
i
class=
"el-icon-setting"
></
i
>
<
span
slot=
"title"
:style="{
color:
'a' ===
templateActive?
'#ffd04b':
'#fff'}"
>Device Management
</
span
>
</
template
>
<
Menus
:listData="
list"
:indexM="
'2'"
/>
</
el-submenu
>
<
el-submenu
index=
"3"
>
<
template
slot=
"title"
>
<
i
class=
"el-icon-setting"
></
i
>
<
span
slot=
"title"
>Device Monitor
</
span
>
</
template
>
<
el-menu-item
index=
"3-1"
>
<
i
class=
"el-icon-tickets"
></
i
>
<
span
>Online Library
</
span
>
</
el-menu-item
>
</
el-submenu
>
<
el-submenu
index=
"4"
>
<
template
slot=
"title"
>
<
i
class=
"el-icon-setting"
></
i
>
<
span
slot=
"title"
>System Setting
</
span
>
</
template
>
<
el-menu-item
index=
"4-1"
>
<
i
class=
"el-icon-tickets"
></
i
>
<
span
>Template Library
</
span
>
</
el-menu-item
>
<
el-menu-item
index=
"4-2"
>
<
i
class=
"el-icon-tickets"
></
i
>
<
span
>Customize
</
span
>
</
el-menu-item
>
<
el-menu-item
index=
"4-3"
>
<
i
class=
"el-icon-question"
></
i
>
<
span
>Help
</
span
>
</
el-menu-item
>
<
el-menu-item
index=
"4-4"
>
<
i
class=
"el-icon-info"
></
i
>
<
span
>Version
</
span
>
</
el-menu-item
>
</
el-submenu
>
</
el-menu
>
</
div
>
</
el-aside
>
</
div
>
</
template
>
<
script
>
import
bus
from
'@/assets/js/bus.js'
import
Menus
from
'@/components/component/menus.vue'
import
axios
from
'axios'
export
default {
props:[
'dataname',
'data'],
components:{
Menus
},
data () {
return {
a:
true,
defaultProps: {
children:
'Children',
label:
'Name',
logo:
'Logo'
}
}
},
computed:{
menuActive(){
return
this.