zoukankan      html  css  js  c++  java
  • vue+element UI递归方式实现多级导航菜单

    介绍

    这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能。

    使用方法

    由于该组件是基于element-UI进行二次封装的,所以在使用该组件时请务必安装element-UI安装方式猛戳这里),安装好element-UI后,只需将该组件文件夹SideBar导入到现有项目中即可使用。

    工作流程

    组件封装好之后,由父组件调用该组件,父组件先向后端发送请求获取菜单数据,然后将菜单数据传递给封装好的菜单组件,菜单组件通过解析数据,完成菜单渲染。

    使用示例

    <template>
      <div id="app">
        <Sidebar :menuList="menuList"/>
      </div>
    </template>
    
    <script>
    import  Sidebar from './SideBar/SideBar.vue'
    export default {
      name: 'app',
      components: { Sidebar},
      data() {
        return {
          menuList,
        }
      }
    }
    </script>
    
    <style>
    
    </style>
    
    

    选项

    属性 描述 类型 是否必须
    menuList 由后端返回的菜单数据 Array

    菜单数据格式示例

    {
        "menuList" : [
              {
                "path": "/func1",     //菜单项所对应的路由路径
                "title": "功能1",     //菜单项名称
                "children":[]        //是否有子菜单,若没有,则为[]
              },
              {
                "path": "/func2",
                "title": "功能2",
                "children":[]
              },
              {
                "path": "/func3",
                "title": "功能3",
                "children": [
                  {
                    "path": "/func31",
                    "title": "功能3-1",
                    "children":[]
                  },
                  {
                    "path": "/func32",
                    "title": "功能3-2",
                    "children":[]
                  },
                  {
                    "path": "/func33",
                    "title": "功能3-3",
                    "children":[]
                  },
                ]
              }
        ]
    }
    

    关于如何将数据转化成以上格式,请参考博文树形多级菜单数据源嵌套结构与扁平结构互转

    效果图

    组件代码

    完整代码请戳☞Vue-Components-Library/SideBar

    (完)

  • 相关阅读:
    noi2002银河英雄传说(并查集)
    Ural1076(km算法)
    km算法的个人理解
    函数之装饰器
    函数进阶(一)
    python全栈测试题(一)
    python基础之循环语句
    字符串方法总结
    python基础3
    python基础2
  • 原文地址:https://www.cnblogs.com/wangjiachen666/p/9782176.html
Copyright © 2011-2022 走看看