您现在的位置是：网站首页> 编程资料编程资料

vue+quasar使用递归实现动态多级菜单_vue.js_

2023-05-24 329人已围观

简介 vue+quasar使用递归实现动态多级菜单_vue.js_

本文实例为大家分享了vue+quasar使用递归实现动态多级菜单的具体代码，供大家参考，具体内容如下

效果图：

菜单初始化入口 menu.vue，初始化侧边栏菜单组建，才是递归开始

菜单递归入口，传入menuList.json菜单配置信息

参数说明

@my-router 菜单配置信息
@init-level 初始化菜单缩进大小

菜单元素递归执行体

菜单元素解释

menuList: [         {           icon: 'inbox',        //图标           label: '菜单1',        //label           children: [             {               icon: 'perm_identity',                  label: '菜单1-1',               path: '/about'     //路径             },             {               icon: 'delete',               label: '菜单1-2',               children: [                 {                   icon: 'settings',                   label: '菜单2-1',                   path: '/noty'                 }               ]             }           ]         },         {           isItemLabel: true,      //是否分隔栏           Label_text: 'item-label '   //分隔栏label         },         {           icon: 'feedback',           label: '菜单数据结构',           path: '/test',           hidden: false            //是否隐藏         }       ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：浅谈JS中var,let和const的区别_javascript技巧_

下一篇：VUE递归树形实现多级列表_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

vue+quasar使用递归实现动态多级菜单_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢