首先来总结element ui 官方文档的左侧菜单结构,带有el-submenu为子级节点,el-menu-item表示没有下级。当然,菜单不能写死，因为菜单也许不止两级,所以我们需要递归来实现。根据当前节点是否有下级去判断,如果有下级,则继续调用子级,直到没有下级为止,下面我贴上左侧菜单所有的代码:
- 请求数据格式
1 [ 2 { 3 name: "首页", 4 id: -1, 5 icon: "el-icon-picture-outline-round", 6 url: "/index", 7 children: [] 8 }, 9 { 10 name: "按钮", 11 id: 20, 12 icon: "el-icon-message-solid", 13 url: "/button", 14 children: [] 15 }, 16 { 17 name: "测试1", 18 id: 1, 19 icon: "el-icon-s-claim", 20 url: "", 21 children: [ 22 { 23 id: 4, 24 parentid: 1, 25 name: "测试1-1", 26 icon: "el-icon-chat-dot-round", 27 url: "", 28 children: [ 29 { 30 id: 8, 31 parentid: 1, 32 name: "测试1-1-1", 33 icon: "el-icon-cloudy", 34 url: "/test", 35 children: [] 36 }, 37 { 38 id: 9, 39 parentid: 1, 40 name: "测试1-1-2", 41 icon: "el-icon-files", 42 url: "/test1", 43 children: [] 44 } 45 ] 46 }, 47 { 48 id: 5, 49 parentid: 1, 50 name: "测试1-2", 51 icon: "el-icon-shopping-cart-1", 52 url: "/test3", 53 children: [] 54 } 55 ] 56 }, 57 { 58 name: "测试2", 59 id: 2, 60 icon: "el-icon-menu", 61 url: "", 62 children: [ 63 { 64 id: 6, 65 parentid: 2, 66 name: "测试2-1", 67 icon: "el-icon-folder-checked", 68 url: "", 69 children: [] 70 }, 71 { 72 id: 7, 73 parentid: 2, 74 name: "测试2-2", 75 icon: "el-icon-folder-remove", 76 url: "", 77 children: [] 78 } 79 ] 80 }, 81 { 82 name: "测试3", 83 id: 3, 84 icon: "el-icon-monitor", 85 url: "", 86 children: [] 87 } 88 ]
- menu.vue
1 <template> 2 <div class="menu"> 3 <div class="logo-con"> 4 <div class="title" v-show="!collapse"> 5 <span class="title__sider-title is-active">{{logo}}</span> 6 </div> 7 <div class="title" v-show="collapse"> 8 <span class="title__sider-title el-tag--mini">LG</span> 9 </div> 10 </div> 11 <el-menu 12 :background-color="backgroundColor" 13 :text-color="textColor" 14 :default-active="$route.meta.pageId" 15 :collapse="collapse" 16 > 17 <template v-for="item in list"> 18 <router-link :to="item.url" :key="item.id" v-if="item.children.length===0"> 19 <el-menu-item :index="item.id.toString()"> 20 <i :class="item.icon"></i> 21 <span slot="title">{{item.name}}</span> 22 </el-menu-item> 23 </router-link> 24 <subMenu v-else :data="item" :key="item.id"></subMenu> 25 </template> 26 </el-menu> 27 </div> 28 </template> 29 30 <script> 31 import subMenu from "./subMenu"; 32 export default { 33 name: "menuList", 34 components: { 35 subMenu 36 }, 37 data() { 38 return { 39 collapse: false, //是否折叠 40 list: [], //当行菜单数据源 41 backgroundColor: "#304156", //导航菜单背景颜色 42 textColor: "#BFCBD9", //导航菜单文字颜色 43 logo: "LOGO" //logo 44 }; 45 } 46 }; 47 </script> 48 49 <style lang="scss" scoped> 50 .el-menu { 51 border-right: none; 52 a { 53 text-decoration: none; 54 } 55 } 56 .logo-con { 57 height: 64px; 58 padding: 10px; 59 60 .title { 61 position: relative; 62 text-align: center; 63 font-size: 20px; 64 height: 64px; 65 line-height: 64px; 66 67 span { 68 padding: 0 5px 0 0; 69 color: #409eff; 70 font-size: 20px; 71 } 72 } 73 } 74 </style>
- submenu.vue
这里有个知识点functional,不懂自行百度,文档地址:https://cn.vuejs.org/v2/guide/render-function.html#search-query-sidebar
1 2 3 4 5 <!-- 6 * @Description: 7 * @Author: PengYH 8 * @Date: 2019-08-06 9 --> 10 <template functional> 11 <el-submenu :index="props.data.id.toString()"> 12 <template slot="title"> 13 <i :class="props.data.icon"></i> 14 <span>{{props.data.name}}</span> 15 </template> 16 <template v-for="item in props.data.children"> 17 <router-link :to="item.url" :key="item.id" v-if="item.children.length===0"> 18 <el-menu-item class="subitem" :index="item.id.toString()"> 19 <i :class="item.icon"></i> 20 <span slot="title">{{item.name}}</span> 21 </el-menu-item> 22 </router-link> 23 <sub-menu v-else :data="item" :key="item.id"></sub-menu> 24 </template> 25 </el-submenu> 26 </template> 27 28 <script> 29 export default { 30 name: "submenu", 31 props: { 32 data: [Array, Object] 33 } 34 }; 35 </script> 36 37 <style lang="scss" scoped> 38 .el-submenu { 39 .el-menu-item { 40 padding: 0; 41 } 42 } 43 </style>
- 效果图
