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

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

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

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

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

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

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

tree-menu组件的代码：

相关推荐：

jQuery+vue.js实现九宫格拼图

以上就是vue.js与element-ui实现菜单树形结构的解决方法的详细内容，更多请关注Gxl网其它相关文章！