用vue.js和element-ui实现菜单树结构的解决方案

由于业务需要，需要实现树形菜单，菜单数据从后台返回。网上找了几篇文章，终于找到了解决办法。

场景：根据业务需求，需要实现活动的树形菜单，菜单数据从后台返回。最终渲染如下：

后台返回的数据格式如下：

Data=[{ pID:'1 '，//父ID name: '目录一'，menuID:'m1 '，//自身IDisContent:false//判断是否是目录}，{}，{ pID:'1 '，name: '目录二'，menuID333。Iscontent: false}，{pid:' m1 '，name:' catalog 1-menu 1 '，menuid:' m11 '，iscontent: true}，{pid3360' m1 '，name:' catalog 1-catalog 1 '，Menuid:' M12 '，iscontent: false}，{pid3360' M12 '，Name 3360 ' catalog 1-catalog 1-Menu one '，Menuid :

tree(){让数据=[{pid:' 1 '，//父id名为： '目录一'，menuID:'m1 '，//自身ID为iscontent 3360 false//判断是否是目录}，}，{pid:' 1 '，名为： '目录二。Menuid:' m2 '，iscontent: false}，{pid3360' m1 '，name: '目录一菜单一'，menuid:' m11 '，iscontent: true}，{pid3360' m1 '，Name: '目录一-目录一'，Menuid :' M12 '，IsContent 3360 False}，{PID :' M12 '，Name: '目录一idata.lengthi ){ if(数据[i]。pID==' 1 '){ let obj=data[I]obj . list=[]tree . push(obj)data . splice(I，1)I-} } menuList(tree)console . log(tree)函数menuList(arr){ if(data.length！=0){ for(让I=0；长度；i ){ for(让j=0；jdata.lengthJ) {if(数据[j]。PID==arr [I]。menuid) {let obj=data [j] obj。list=[] arr [I]。名单。推送数据。拆分(j，1) j-}}菜单列表

[{'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 '，' isContent':true '，' list ' :[]} } }，{'pID':'1 '，' name': '目录二，' menuID':'m2 '，' isContent':false，' list':[{'pID':'m2 '，' name': '目录二-菜单一，' menuID':'m21 '，' isContent':true '，' list':[]}，{'pID':'m2 '，' name': '目录二-菜单二，' menuID':'m22 '，' isContent':true '，' list':[]}]}]接下来就要展示了，项目中用的元素用户界面的导航菜单组件，为了实现这样的树形结构，将每一级的菜单单独作为一个组件，通过判断isContent的值来递归。我直接把代码贴出来

埃尔-菜单主题=' dark ' :默认-活动=' openMenuID ' :默认-打开eds=' OpenMenuArr ' class=' El-menu ' @在梅努利斯特埃尔-子菜单：索引=项目。menuid v-if='项中选择='手柄选择'模板v-for='(项目，索引).IsContent ' template slot=' title ' I class=' El-icon-menu '/I { { item }。name } }/template tree-menu : data=' item。列表'/树-菜单/El-子菜单El-菜单-项目：索引=项目。menuid v-else { { item }。名称} }/El-菜单项/模板/El-菜单树-菜单-菜单组件的代码：

数据埃尔-子菜单' :index=menu.menuID v-if='菜单中的模板v-for='(菜单，索引)。IsContent ' template slot=' title ' I class=' El-icon-plus '/I { { menu }。名称} }/模板树-菜单： data=' menu。列表'/树-菜单/El-子菜单El-菜单项v-else : index=menu。menuid { { menu。名称} }/El-菜单项/模板总结

以上所述是小编给大家介绍的vue.js与元素用户界面实现菜单树形结构的解决方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！