vue+elementUI以组件递归⽅式实现多级导航菜单
介绍
这是⼀个是基于element-UI的导航菜单组件基础上，进⾏了⼆次封装的菜单组件，该组件以组件递归的⽅式，实现了可根据从后端接收到的json菜单数据，动态渲染多级菜单的功能。
使⽤⽅法
由于该组件是基于element-UI进⾏⼆次封装的，所以在使⽤该组件时请务必安装element-UI（），安装好element-UI后，只需将该组件⽂件
夹SideBar导⼊到现有项⽬中即可使⽤。
⼯作流程
组件封装好之后，由⽗组件调⽤该组件，⽗组件先向后端发送请求获取菜单数据，然后将菜单数据传递给封装好的菜单组件，菜单组件通过解析数据，完成菜单渲染。
使⽤⽰例
1<template>
2<div id="app">
3<Sidebar :menuList="menuList"/>
4</div>
5</template>
6
7<script>
8 import  Sidebar from './SideBar/SideBar.vue'
9 export default {
10  name: 'app',
11  components: { Sidebar},
12  data() {
13return {
14      menuList,
15    }
16  }
17 }
18</script>
选项
属性描述类型是否必须
menuList由后端返回的菜单数据Array是
菜单数据格式⽰例
1 {
2    "menuList" : [
3          {
导航菜单4            "path": "/func1",    //菜单项所对应的路由路径
5            "title": "功能1",    //菜单项名称
6            "children":[]        //是否有⼦菜单，若没有，则为[]
7          },
8          {
9            "path": "/func2",
10            "title": "功能2",
11            "children":[]
12          },
13          {
14            "path": "/func3",
15            "title": "功能3",
16            "children": [
17              {
18                "path": "/func31",
19                "title": "功能3-1",
20                "children":[]
21              },
22              {
23                "path": "/func32",
24                "title": "功能3-2",
25                "children":[]
26              },
27              {
28                "path": "/func33",
29                "title": "功能3-3",
30                "children":[]
31              },
32            ]
33          }
34    ]
35 }
关于如何将数据转化成以上格式，请参考博⽂效果图
组件代码完整代码请戳☞
（完）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。