vue三级菜单渲染_vue+element UI递归方式实现多级导航菜单

介绍

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

使用方法

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

工作流程

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

使用示例

import Sidebar from './SideBar/SideBar.vue'

export default {

name: 'app',

components: { Sidebar},

data() {

return {

menuList,

}

}

}

选项

属性

描述

类型

是否必须

menuList

由后端返回的菜单数据

Array

是

菜单数据格式示例

{

"menuList" : [

{

"path": "/func1", //菜单项所对应的路由路径