vue.js与element-ui实现菜单树形结构的解决方法
发布时间:2020-12-17 02:19:53 所属栏目:百科 来源:网络整理
导读:由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法。 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: 这是一串具有父子关系的数
由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法。 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: 这是一串具有父子关系的数据,首先就是要把这一大串数据转化成树形结构: 运行完后返回的结构就是这个样子: 接下来就要展示了,项目中用的element-ui的导航菜单组件,为了实现这样的树形结构,将每一级的菜单单独作为一个组件,通过判断isContent的值来递归。我直接把代码贴出来
{{item.name}}
tree-menu组件的代码:
{{menu.name}}
总结以上所述是小编给大家介绍的vue.js与element-ui实现菜单树形结构的解决方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |