易妖游戏网
您的当前位置:首页vue.js与element-ui实现菜单树形结构的解决方法

vue.js与element-ui实现菜单树形结构的解决方法

来源:易妖游戏网
 本文通过实例给大家介绍了vue.js与element-ui实现菜单树形结构,非常不错,具有参考借鉴价值,需要的朋友可以参考下

由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法。

场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下:

后台返回的数据格式是这个样子的:

这是一串具有父子关系的数据,首先就是要把这一大串数据转化成树形结构:

运行完后返回的结构就是这个样子:

接下来就要展示了,项目中用的element-ui的导航菜单组件,为了实现这样的树形结构,将每一级的菜单单独作为一个组件,通过判断isContent的值来递归。我直接把代码贴出来

tree-menu组件的代码:

        
显示全文