elementUI 多级菜单动态渲染

侧边栏导航菜单在平常 CMS 管理平台开发中很常见，最近在产品开发中就遇到难题：

公司采用的是 vue + element 技术栈，element 文档中 NavMenu 是写死的，而不是通过数据渲染的，菜单多、层级深的时候，就很鸡肋...

再参考 此链接 后，再结合自己需求，组装成 kgMenu 组件

kgMenu 里面封装 kgSubMenu、kgMenuGroup、kgMenuItem 三个基础组件

kgMenuItem.vue

// kgMenuItem



复制代码

kgSubMenu.vue

// kgSubMenu.vue



复制代码

kgMenuGroup.vue

// kgMenuGroup.vue



复制代码

kgMenu.vue

复制代码

封装好后，在需要调用的调用 kgMenu 即可, 通过 props 传递菜单数据 leftMenus 和 菜单设置 settings，

\\ index.vue



复制代码