Vue中怎么递归多级菜单-创新互联

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"
 }
];

需要实现的效果:

 Vue中怎么递归多级菜单

首先创建两个组件 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:


 .item {
 margin: 10px 0;
 padding: 0 10px;
 border-radius: 4px;
 list-style: none;
 background: skyblue;
 color: #fff;
 }

Menu:


 .wrapper {
 cursor: pointer;

 .item-title {
  font-size: 16px;
 }
 }

Menu 中 ul 标签内的代码可以单独提取出来,Menu 作为 wrapper 使用,递归操作部分的代码也可以单独提取出来

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


本文名称:Vue中怎么递归多级菜单-创新互联
网页地址:http://csdahua.cn/article/ccdesd.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流