element ui 菜单封装_vue+element UI实现多级导航菜单

1.前言

在某次日常开发中，项目要求页面的导航菜单需要动态加载，即菜单不能在页面上写死，菜单上的数据由后端开发从数据库中获取返回给前端使用，前端拿到数据后再通过解析数据最终将菜单渲染出来。由于菜单有可能是多级的，所以我们需要使用递归的方式，一层一层的递归数据，将多级菜单完整显示出来。本篇博文借助element UI组件库中的Navmenu导航菜单组件，将其进行改造后封装成一个多级导航菜单组件。

2.工作流程

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

3.封装菜单组件

{ {navMenu.api_title}}

{ {navMenu.api_title}}

{ {item.api_title}}

export default {

name: "NavMenu",

props: ['navMenus'],

data() {

return {}

},

}

.navMenu .el-menu > li {

background-color: rgb(84, 92, 100);

}

.navMenu .el-menu span, li