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

发布时间:2023-10-18 12:30

本文实例为大家分享了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            //是否隐藏
        }
      ]

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号