vue.js与element-ui实现菜单树形结构的解决方法本文通过实例给大家介绍了vue.js与element-ui实现菜单树形结构，非
常不错，具有参考借鉴价值,需要的朋友可以参考下由于业务需要，要求实现树形菜单，且菜单数据由后台返回，在网上找了几篇文章，看下来总算
有了解决办法。场景：根据业务要求，需要实现活动的树形菜单，菜单数据由后台返回，最后的效果图如下：后台返回的数据格式是这个样子的：1
23456789101112131415161718192021222324252627282930313233343536373
83940414243data=[{?pID:''1'',//父ID?name:''目录一'',menuID:''m1'',//本身IDis
Content:false//判断是否是目录},?{pID:''1'',?name:''目录二'',menuID:''m2'',isCont
ent:false?},?{?pID:''m1'',?name:''目录一--菜单一'',menuID:''m11'',isContent:
true?},?{?pID:''m1'',?name:''目录一--目录一'',menuID:''m12'',isContent:false
?},{pID:''m12'',?name:''目录一--目录一--菜单一'',menuID:''m121'',isContent:tr
ue?},?{?pID:''m2'',?name:''目录二--菜单一'',menuID:''m21'',isContent:true?},
?{?pID:''m2'',?name:''目录二--菜单二'',menuID:''m22'',isContent:true?},?]这是一
串具有父子关系的数据，首先就是要把这一大串数据转化成树形结构：1234567891011121314151617181920212
22324252627282930313233343536373839404142434445464748495051525354
55565758596061626364656667686970717273tree(){?letdata=[{?pID:''1''
,//父ID?name:''目录一'',?menuID:''m1'',//本身ID?isContent:false//判断是否是目录?}
,?{?pID:''1'',?name:''目录二'',?menuID:''m2'',?isContent:false?},?{?pID:''
m1'',?name:''目录一--菜单一'',?menuID:''m11'',?isContent:true?},?{?pID:''m1''
,?name:''目录一--目录一'',?menuID:''m12'',?isContent:false?},?{?pID:''m12
'',?name:''目录一--目录一--菜单一'',?menuID:''m121'',?isContent:true?},?{?pID:
''m2'',?name:''目录二--菜单一'',?menuID:''m21'',?isContent:true?},?{?pID:''m2
'',?name:''目录二--菜单二'',?menuID:''m22'',?isContent:true?},?]?lettree=
[]?for(leti=0;ibj=data[i]?obj.list=[]?tree.push(www.46club.comobj)?data.spl
ice(i,1)?i--?}?}?menuList(tree)?console.log(tree)?function?menuLi
st(arr){?if(data.length!=0){?for(leti=0;i(letj=0;jtobj=data[j]?obj.list=[]?arr[i].list.push(obj)?data.splice(j
,1)?j--?}?}?menuList(arr[i].list)?}?}?}?}运行完后返回的结构就是这个样子：1[{"pID"
:"1","name":"目录一","menuID":"m1","isContent":false,"list":[{"pID":
"m1","name":"目录一--菜单一","menuID":"m11","isContent":true,"list":[]}
,{"pID":"m1","name":"目录一--目录一","menuID":"m12","isContent":false,"
list":[{"pID":"m12","name":"目录一--目录一--菜单一","menuID":"m121","isCon
tent":true,"list":[]}]}]},{"pID":"1","name":"目录二","menuID":"m2","
isContent":false,"list":[{"pID":"m2","name":"目录二--菜单一","menuID":"
m21","isContent":true,"list":[]},{"pID":"m2","name":"目录二--菜单二","m
enuID":"m22","isContent":true,"list":[]}]}]接下来就要展示了，项目中用的element-
ui的导航菜单组件，为了实现这样的树形结构，将每一级的菜单单独作为一个组件，通过判断isContent的值来递归。我直接把代码贴出
来1234567891011121314151617openMenuID"?:default-openeds="openMenuArr"?class="el-menu"?@selec
t="handleSelect">??-submenu:index=item.menuIDv-if="item.IsContent">?="www.267774.comtitle">??{{item.name
}}???menu>?{{item.name}}enu-item>??tree-menu组件的代码：1234567891011latev-for="(menu,index)indata">?v-if="menu.IsContent">??-plus">?{{menu.name}}????{{menu.name}}?? |
|
