上一篇文章在吗？手把手教vue-cli4+elementUI搭建通用后台管理系统—(一)UI界面搭建之head头部已经搭建好头部，那么本文将讲侧边栏导航。
提示：以下是本篇文章正文内容，下面案例可供参考
在项目目录src/views下创建一个TheHeader.vue文件，代码如下：
<template> <div class="sidebar"> <div class="collapse" @click="collClick"> <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'" ></i> </div> <div class="menu"> <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#324157" text-color="#BFCBD9" :collapse="isCollapse" > <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">导航一</span> </template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> <el-submenu index="1-4"> <span slot="title">选项4</span> <el-menu-item index="1-4-1">选项1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"> <i class="el-icon-menu"></i> <span slot="title">项目管理</span> </template> <el-menu-item index="2-1">共有项目</el-menu-item> <el-menu-item index="2-2">私有项目</el-menu-item> </el-submenu> <el-menu-item index="3"> <i class="el-icon-document"></i> <span slot="title">导航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">导航四</span> </el-menu-item> </el-menu> </div> </div> </template> <script> export default { name: "", data() { return { isCollapse: false }; }, components: {}, mounted() {}, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); }, collClick() { this.isCollapse = !this.isCollapse; } } }; </script> <style> .sidebar { height: 100%; /* width: 201px; */ background-color: #324157; float: left; overflow-y: scroll; } .collapse { cursor: pointer; font-size: 28px; color: white; height: 30px; position: relative; padding: 10px 0; } .collapse > i { display: inline-block; position: absolute; left: 15px; } .sidebar > div.menu { height: 100%; } .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; height: 100%; } </style> 样式得自己书写，style scoped意味着样式只用于此页面 我使用的是带有折叠按钮的侧栏折叠按钮的icon切换是elementUI自带的icon侧栏我删掉了分组，如有需要可以保留，看自己需求本示例使用到的elementUI组件如下： elementUI导航菜单组件 elementUI icon图标
Home.vue代码如下：
<template> <div class="wrapper"> <TheHeader></TheHeader> <TheSidebar></TheSidebar> </div> </template> <script> // @ is an alias to /src import TheHeader from '@/views/TheHeader.vue'; import TheSidebar from '@/views/TheSidebar.vue'; export default { name: "Home", components: { TheHeader, TheSidebar }, data() { return { } }, mounted() { console.log("mounted"); }, methods: { } }; </script>总结：
菜单模板由一下几个部分组成：
唯一标识-----------------------------------------------------------index菜单名称------------------------------------------------------------title菜单icon------------------------------------------------------------icon子菜单（如果这个菜单有子菜单的情况下）--------------subs模拟数据： 1主页 2客户管理 2-1用户管理 2-2车主卡管理 2-3司机管理 3测试 3-1测试二级菜单 3-1-1测试三级菜单
所以菜单数组应该这么写：
//先直接写在data(){}里即可 data() { return { isCollapse: false, menuList: [ { icon: "el-icon-s-home", index: "homepage", title: "主页", name: "主页" }, { icon: "el-icon-s-custom", index: "custommanage", title: "客户管理", subs: [ { index: "usermanage", title: "用户管理", name: "用户管理" }, { index: "usercard", title: "车主卡管理", name: "车主卡管理" }, { index: "drivermanage", title: "司机管理", name: "司机管理" } ] }, { icon: "el-icon-s-flag", index: "test1", title: "测试", subs: [ { index: "test2", title: "测试二级", subs: [ { index: "test1-3", title: "1-测试三级", name: '1-测试三级' }, { index: "test2-3", title: "2-测试三级", name: '2-测试三级' } ] } ] } ] }; },根据菜单数组，修改template后，TheSidebar.vue完整代码如下：
<template> <div class="sidebar"> <div class="collapse" @click="collClick"> <i :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i> </div> <div class="menu"> <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#324157" text-color="#BFCBD9" :collapse="isCollapse" > <template v-for="item in menuList"> <template v-if="item.subs"> <el-submenu :index="item.index" :key="item.index"> <template slot="title"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </template> <template v-for="two in item.subs"> <el-submenu v-if="two.subs" :index="two.index" :key="two.index"> <span slot="title">{{ two.title }}</span> <!-- 三级菜单 --> <el-menu-item v-for="three in two.subs" :index="three.index" :key="three.index" >{{ three.title }}</el-menu-item > </el-submenu> <!-- 二级菜单 --> <el-menu-item v-else :index="two.index" :key="two.index">{{ two.title }}</el-menu-item> </template> </el-submenu> </template> <!-- 一级菜单 --> <template v-else> <el-menu-item :index="item.index" :key="item.index"> <i :class="item.icon"></i> <span slot="title">{{ item.title }}</span> </el-menu-item> </template> </template> </el-menu> </div> </div> </template> <script> export default { name: "", data() { return { isCollapse: false, menuList: [ { icon: "el-icon-s-home", index: "homepage", title: "主页", name: "主页", }, { icon: "el-icon-s-custom", index: "custommanage", title: "客户管理", subs: [ { index: "usermanage", title: "用户管理", name: "用户管理", }, { index: "usercard", title: "车主卡管理", name: "车主卡管理", }, { index: "drivermanage", title: "司机管理", name: "司机管理", }, ], }, { icon: "el-icon-s-flag", index: "test1", title: "测试", subs: [ { index: "test2", title: "测试二级", subs: [ { index: "test1-3", title: "测试三级1", name: "测试三级1", }, { index: "test2-3", title: "测试三级2", name: "测试三级2", }, ], }, ], }, ], }; }, components: {}, mounted() {}, methods: { handleOpen(key, keyPath) { console.log(key, keyPath); }, handleClose(key, keyPath) { console.log(key, keyPath); }, collClick() { this.isCollapse = !this.isCollapse; }, }, }; </script> <style> .sidebar { height: 100%; /* width: 201px; */ background-color: #324157; float: left; overflow-y: scroll; } .collapse { cursor: pointer; font-size: 28px; color: white; height: 30px; position: relative; padding: 10px 0; } .collapse > i { display: inline-block; position: absolute; left: 15px; } .sidebar > div.menu { height: 100%; } .el-menu-vertical-demo:not(.el-menu--collapse) { width: 200px; height: 100%; } .menu /deep/.el-submenu__title { text-align: left; } .menu /deep/.el-menu-item { text-align: left; } </style>以上就是今天要讲的内容，本文仅仅简单介绍了封装一个侧栏导航组件，并且菜单可以动态获取渲染。
