
由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法。
场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下:

后台返回的数据格式是这个样子的:
这是一串具有父子关系的数据,首先就是要把这一大串数据转化成树形结构:
运行完后返回的结构就是这个样子:
接下来就要展示了,项目中用的element-ui的导航菜单组件,为了实现这样的树形结构,将每一级的菜单单独作为一个组件,通过判断isContent的值来递归。我直接把代码贴出来
tree-menu组件的代码:
