如何在vue项目中使用递归组件配合Element-ui布局侧边栏
2018-08-17 18:45
1406 查看
在我们整体的项目开发中,对项目框架的整体布局是非常重要的一环,其中侧边栏会涉及到一级一级嵌套以及项目迭代的问题,而且还涉及到路由的问题,所以用树形结构显然不合适,我们需要考虑迭代的问题,所以我们选择用递归组件对侧边栏进行布局,新增菜单只需要在数据层添加即可,可以无极限嵌套菜单级别,而达到了一劳永逸的效果。
首先我们需要有自己侧边栏的数据(前端自己写静态数据或从后台获取):
data.js:
[code]export const data1={ "list": [ { "entity": { "id": 1, "parentMenuId": 0, "name": "systemManage", "icon": "el-icon-message\r\n", "alias": "系统管理", "state": "ENABLE", "sort": 0, "value": null, "type": "NONE", "discription": "用于系统管理的菜单", "createUserId": 1 }, "childs": [ { "entity": { "id": 3, "parentMenuId": 1, "name": "authManage", "icon": "el-icon-loading", "alias": "权限管理", "state": "ENABLE", "sort": 0, "value": "/system/auth", "type": "LINK", "discription": "用于权限管理的菜单", "createUserId": 1 }, "childs": null }, { "entity": { "id": 4, "parentMenuId": 1, "name": "roleManage", "icon": "el-icon-bell", "alias": "角色管理", "state": "ENABLE", "sort": 1, "value": "/system/role", "type": "LINK", "discription": "用于角色管理的菜单", "createUserId": 1 }, "childs": null }, { "entity": { "id": 2, "parentMenuId": 1, "name": "menuManage", "icon": "el-icon-edit", "alias": "菜单管理", "state": "ENABLE", "sort": 2, "value": "/system/menu", "type": "LINK", "discription": "用于菜单管理的菜单", "createUserId": 1 }, "childs": null }, { "entity": { "id": 5, "parentMenuId": 1, "name": "groupManage", "icon": "el-icon-mobile-phone\r\n", "alias": "分组管理", "state": "ENABLE", "sort": 3, "value": "/system/group", "type": "LINK", "discription": "用于分组管理的菜单", "createUserId": 1 }, "childs": null } ] }, { "entity": { "id": 6, "parentMenuId": 0, "name": "userManage", "icon": "el-icon-news", "alias": "用户管理", "state": "ENABLE", "sort": 1, "value": null, "type": "NONE", "discription": "用于用户管理的菜单", "createUserId": 1 }, "childs": [ { "entity": { "id": 7, "parentMenuId": 6, "name": "accountManage", "icon": "el-icon-phone-outline\r\n", "alias": "帐号管理", "state": "ENABLE", "sort": 0, "value": "", "type": "NONE", "discription": "用于帐号管理的菜单", "createUserId": 1 }, "childs": [ { "entity": { "id": 14, "parentMenuId": 7, "name": "emailManage", "icon": "el-icon-sold-out\r\n", "alias": "邮箱管理", "state": "ENABLE", "sort": 0, "value": "/content/email", "type": "LINK", "discription": "用于邮箱管理的菜单", "createUserId": 1 }, "childs": null }, { "entity": { "id": 13, "parentMenuId": 7, "name": "passManage", "icon": "el-icon-service\r\n", "alias": "密码管理", "state": "ENABLE", "sort": 1, "value": "/content/pass", "type": "LINK", "discription": "用于密码管理的菜单", "createUserId": 1 }, "childs": null } ] }, { "entity": { "id": 8, "parentMenuId": 6, "name": "integralManage", "icon": "el-icon-picture", "alias": "积分管理", "state": "ENABLE", "sort": 1, "value": "/user/integral", "type": "LINK", "discription": "用于积分管理的菜单", "createUserId": 1 }, "childs": null } ] }, { "entity": { "id": 9, "parentMenuId": 0, "name": "contentManage", "icon": "el-icon-rank", "alias": "内容管理", "state": "ENABLE", "sort": 2, "value": null, "type": "NONE", "discription": "用于内容管理的菜单", "createUserId": 1 }, "childs": [ { "entity": { "id": 10, "parentMenuId": 9, "name": "classifyManage", "icon": "el-icon-printer", "alias": "分类管理", "state": "ENABLE", "sort": 0, "value": "/content/classify", "type": "LINK", "discription": "用于分类管理的菜单", "createUserId": 1 }, "childs": null }, { "entity": { "id": 11, "parentMenuId": 9, "name": "articleManage", "icon": "el-icon-star-on", "alias": "文章管理", "state": "ENABLE", "sort": 1, "value": "/content/article", "type": "LINK", "discription": "用于文章管理的菜单", "createUserId": 1 }, "childs": null }, { "entity": { "id": 12, "parentMenuId": 9, "name": "commentManage", "icon": "el-icon-share", "alias": "评论管理", "state": "ENABLE", "sort": 2, "value": "/content/comment", "type": "LINK", "discription": "用于评论管理的菜单", "createUserId": 1 }, "childs": null } ] } ] }
然后我们定义一个父级组件siderbar.vue:
[code]<template> <!--左侧菜单组件--> <el-menu default-active="0" class="el-menu-vertical-demo" @select="menuSelected" background-color="#F0F6F6" text-color="#3C3F41" active-text-color="black"> <nav-menu :navMenus="leftMenus"></nav-menu> </el-menu> </template> <script> import NavMenu from './NavMenu.vue' import {data1} from './data.js' export default{ data(){ return{ leftMenus:data1.list } }, components:{ NavMenu }, created(){ console.log('数据信息',this.leftMenus) }, methods:{ menuSelected(index,indexPath){ console.log('当前绑定的index值',index) console.log('当前绑定的index与path值',indexPath) } } } </script> <style> </style>
我们需要对侧边栏配置可以查看elementui官方文档具体配置
最后,我们引入子组件,并且递归调用:
[code]<template> <div class="navMenu"> <label v-for="navMenu in navMenus"> <!--只有一级菜单--> <el-menu-item v-if="navMenu.childs==null&&navMenu.entity&&navMenu.entity.state==='ENABLE'" :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name" :route="navMenu.entity.value" > <!--图标--> <i :class="navMenu.entity.icon"></i> <!--标题--> <span slot="title">{{navMenu.entity.alias}}</span> </el-menu-item> <!--有多级菜单--> <el-submenu v-if="navMenu.childs&&navMenu.entity&&navMenu.entity.state==='ENABLE'" :key="navMenu.entity.id" :data="navMenu" :index="navMenu.entity.name"> <template slot="title"> <i :class="navMenu.entity.icon"></i> <span> {{navMenu.entity.alias}}</span> </template> <!--递归组件,把遍历的值传回子组件,完成递归调用--> <nav-menu :navMenus="navMenu.childs"></nav-menu> </el-submenu> </label> </div> </template> <script> export default { name: 'NavMenu', //使用递归组件必须要有 props: ['navMenus'], // 传入子组件的数据 data() { return {} }, methods: {} } </script> <style scoped> </style>
具体的注意事项以及代码解释在代码中都有注释
最后的效果图,如果我们需要增加菜单以及菜单级别只需在数据层改动即可:
阅读更多
相关文章推荐
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
- 在vue项目中使用element-ui的Upload上传组件
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
- 在vue项目中使用element-ui的Upload上传组件的示例
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(1)
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(2)
- vue中使用element组件的Layout布局和Button按钮实现分页
- 阿里OSS Java-SDK带进度条上传,配合前端element-ui upload组件使用示例
- 使用ES6+vue+elementui+webpack搭建简单项目
- 如何制作Vuejs组件,并且在项目中使用
- VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- vue2.0 使用element-ui里的upload组件实现多图上传。采用FORMDATA的方式上传。
- vue-cli安装element-ui及分页组件使用
- 如何在 Vue-cli 创建的项目中引入 iView组件UI
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- Vue的项目使用Element ui 走马灯 不能实现的问题
- vue项目中,element组件的安装和使用的方法
- 使用ES6+vue+elementui+webpack搭建简单项目
- VUE 使用新版本 element-ui 组件库 Select 组件时, value 值为对象时的 BUG 处理