扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Vue中怎么递归多级菜单,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
创新互联专注于企业成都全网营销推广、网站重做改版、西乡网站定制设计、自适应品牌网站建设、成都h5网站建设、成都做商城网站、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为西乡等各大城市提供网站开发制作服务。考虑以下菜单数据:
[ { name: "About", path: "/about", children: [ { name: "About US", path: "/about/us" }, { name: "About Comp", path: "/about/company", children: [ { name: "About Comp A", path: "/about/company/A", children: [ { name: "About Comp A 1", path: "/about/company/A/1" } ] } ] } ] }, { name: "Link", path: "/link" } ];
需要实现的效果:
首先创建两个组件 Menu 和 MenuItem
// Menuitem
MenuItem 是一个 li 标签和 slot 插槽,允许往里头加入各种元素
Menu 组件外层是一个 ul 标签,内部是 vFor 遍历生成的 MenuItem
这里有两种情况需要做判断,一种是 item 没有 children 属性,直接在 MenuItem 的插槽加入一个 span 元素渲染 item 的 title 即可;另一种是包含了 children 属性的 item 这种情况下,不仅需要渲染 title 还需要再次引入 Menu 做递归操作,将 item.children
作为路由传入到 router prop
最后在项目中使用:
最后增加一些样式:
MenuItem:
Menu:
Menu 中 ul 标签内的代码可以单独提取出来,Menu 作为 wrapper 使用,递归操作部分的代码也可以单独提取出来
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流