vue+element UI 实现无限极分类（二）

这是自己项目的经历，真是很复杂！！！大概记录一下代码的逻辑

可以无限添加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.