网站的后台,惠州做网站的,贵阳的网站建设公司,舟山网站建设优化这次给大家带来vue.jselement-ui做出菜单树形结构#xff0c;vue.jselement-ui做出菜单树形结构的注意事项有哪些#xff0c;下面就是实战案例#xff0c;一起来看一下。由于业务需要#xff0c;要求实现树形菜单#xff0c;且菜单数据由后台返回#xff0c;在网上找了几…这次给大家带来vue.jselement-ui做出菜单树形结构vue.jselement-ui做出菜单树形结构的注意事项有哪些下面就是实战案例一起来看一下。由于业务需要要求实现树形菜单且菜单数据由后台返回在网上找了几篇文章看下来总算有了解决办法。场景根据业务要求需要实现活动的树形菜单菜单数据由后台返回最后的效果图如下后台返回的数据格式是这个样子的data[{pID:1,//父IDname:目录一,menuID:m1,//本身IDisContent: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},]这是一串具有父子关系的数据首先就是要把这一大串数据转化成树形结构tree(){let data[{pID:1,//父IDname:目录一,menuID:m1,//本身IDisContent: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},]let tree []for(let i0;iif(data[i].pID 1){let obj data[i]obj.list []tree.push(obj)data.splice(i,1)i--}}menuList(tree)console.log(tree)function menuList(arr){if(data.length !0){for(let i0; ifor(let j0;jif(data[j].pID arr[i].menuID){let obj data[j]obj.list []arr[i].list.push(obj)data.splice(j,1)j--}}menuList(arr[i].list)}}}}运行完后返回的结构就是这个样子[{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:[]}]}]接下来就要展示了项目中用的element-ui的导航菜单组件为了实现这样的树形结构将每一级的菜单单独作为一个组件通过判断isContent的值来递归。我直接把代码贴出来themedark:default-activeopenMenuID:default-openedsopenMenuArrclassel-menuselecthandleSelect{{item.name}}{{item.name}}tree-menu组件的代码{{menu.name}}{{menu.name}}相信看了本文案例你已经掌握了方法更多精彩请关注php中文网其它相关文章推荐阅读
