已解决问题
谷歌xttmi用户在2013.08.15提交了关于“双皮奶vue.js与element-ui实现菜单树形结构的解决方法”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-02-27T04:07:33。希望大家能够帮助她。详细问题描述及疑问：期待您的答案，你无异于雪中送炭,让我感激涕零 ！
vue.js与element-ui实现菜单树形结构的解决方法
时间：2013.08.15 发布人：xttmi
谷歌xttmi用户在2013.08.15提交了关于“双皮奶vue.js与element-ui实现菜单树形结构的解决方法”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-02-27T04:07:33。希望大家能够帮助她。
希望以下的回答，能够帮助你。用户名：jxa2012
pID:'1',//父IDname:'目录一',me**I扩工负到D:'m1',//本身ID来自 isContent:false//判断331215问答是否是目录},{pI支辰阳植载存案太件句D:'1',name:'目录二',me**ID:'m2', isC式此听座安相明选露黄艺ontent:false},{pID:'m1',name:'目录一--菜单一',me**ID:'m11', isContent味攻双若宜理读或谈:true},{pID:'于员限住言宗步垂m1',name:'目录一--目录一',me**ID:'m12',更其见曲早父护 i差方口济厂丝承延然sContent:false}, { pID:'m12',na干明牛英条分烟景占川me:'目录一--目乙北型剂录一--菜单一',me**ID:'m121', isContent:true},{pID:'m2',name:'目录二--菜单一',me**ID:'m21', 卫织数丰型弱展两背 isContent:true},{pID:'m2'目想右西苦听信职跟青器,name:'目录怀备附白倒终持十二--菜单二',me**ID:'m22', isContent:true},]tdata=[{pID:'1',//父IDname:'目录一',me**ID:'m1',//本身ID指条讨核 isContent:false//判断是否是目策马命职胡便连录},{pID:'1',name:'目录二',me**I滑花群径饭D:'m2', isContent:false},{pID:'m1',name:'目州持划重型例采拿景录一--菜单一',me**ID:'m11', 必木占皇间半植 isContent:true},{pID:'m1',name:'目录一--目录一',me**ID:'m12', isContent:false}, { pID:'m12',name:'目录一--目录一--菜单一',me**ID:'m121', isContent:true},{pID:'m2',name:'目录二--菜单一',me**ID:'m21', isContent:true},{pID:'m2',name:'目录二--菜单二',me**ID:'m22', isContent:true},]lettree=[]for(leti=0;i<data.length;i++){if(data[i].pID=='1'){letobj=data[i]obj.list=[]tree.push(obj)data.splice(i,1)i--}}me**List(tree)console.log(tree)functionme**List(arr){if(data.length!=0){for(leti=0;i<arr.length;i++){for(letj=0;j<data.length;j++){if(data[j].pID==arr[i].me**ID){letobj=data[j]obj.list=[]arr[i].list.push(obj)data.splice(j,1)j--}}me**List(arr[i].list)}}}}
第1个回答
由于业务需要，要求实现树形菜单，
场景：根据业务要求，需要实现活动的树形菜单，菜单**由后台返回，最
后台返回的**格式是这个样子的：
data=[{这是一串具有父子关系的**，首先就是要把这一大串**转化成树形结构：
tree(){le运行完后返回的结构就是这个样子：
[{"pID":"1","name":"目录一","me**ID":"m1","isContent":false,"list":[{"pID":"m1","name":"目录一--菜单一","me**ID":"m11","isContent":true,"list":[]},{"pID":"m1","name":"目录一--目录一","me**ID":"m12","isContent":false,"list":[{"pID":"m12","name":"目录一--目录一--菜单一","me**ID":"m121","isContent":true,"list":[]}]}]},{"pID":"1","name":"目录二","me**ID":"m2","isContent":false,"list":[{"pID":"m2","name":"目录二--菜单一","me**ID":"m21","isContent":true,"list":[]},{"pID":"m2","name":"目录二--菜单二","me**ID":"m22","isContent":true,"list":[]}]}]接下来就要展示了，项目中用的element-ui的导航菜单组件，为了实现这样的树形结构，将每一级的菜单单独作为一个组件，通过判断isContent的值来递归。我直接把代码贴出来
<el-me**theme="dark":default-active="openMe**ID":default-openeds="openMe**Arr"class="el-me**"@select="handleSelect"><templatev-for="(item,index)inme**List"><el-subme**:index=item.me**IDv-if="item.IsContent"><templateslot="title"><iclass="el-icon-me**"></i>{{***.name}}</template><tree-me**:data="item.list"></tree-me**></el-subme**><el-me**-item:index=item.me**IDv-else>{{***.name}}</el-me**-item></template></el-me**>tree-me**组件的代码：
<templatev-for="(me**,index)indata"><el-subme**:index=me**.me**IDv-if="me**.IsContent"><templateslot="title"><iclass="el-icon-plus"></i>{{***.name}}</template><tree-me**:data="me**.list"></tree-me**></el-subme**><el-me**-itemv-else:index=me**.me**ID>{{***.name}}</el-me**-item></template>总结
以上所述是小编给大家介绍的vue.js与element-ui实现菜单树形结构的解决方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章:vue.jselement-uitree树形控件改iview的方法浅谈vue.js导入css库(elementUi)的方法使用Vue.js和Element-UI做一个简单登录页面的实例vue.jselement-uivalidate中代码不执行问题解决方法Springboot+mybatis+Vue.js+ElementUI实现**的增删改查实例代码(二)Springboot+mybatis+Vue.js+ElementUI实现**的增删改查实例代码(一)使用vue.js2.0+ElementUI开发后台管理系统详细教程（一）使用vue.js2.0+ElementUI开发后台管理系统详细教程（二）