menu 支持 icon 嵌套

src/router/index.js

@@ -102,6 +102,7 @@ export const asyncRouterMap = [
         component: _import('example/table/index'),
         redirect: '/example/table/table',
         name: 'Table',
+        icon: 'table',
         children: [
           { path: 'dynamictable', component: _import('example/table/dynamictable'), name: '动态table' },
           { path: 'dragtable', component: _import('example/table/dragTable'), name: '拖拽table' },
@@ -109,10 +110,10 @@ export const asyncRouterMap = [
           { path: 'table', component: _import('example/table/table'), name: '综合table' }
         ]
       },
-      { path: 'form/edit', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true } },
-      { path: 'form/create', component: _import('example/form'), name: '创建Form' },
+      { path: 'form/edit', icon: 'ziliaoshouce', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true } },
+      { path: 'form/create', icon: 'yinhangqia', component: _import('example/form'), name: '创建Form' },
 
-      { path: 'tab/index', component: _import('example/tab/index'), name: 'Tab' }
+      { path: 'tab/index', icon: 'mobankuangjia', component: _import('example/tab/index'), name: 'Tab' }
     ]
   },
   {

src/styles/sidebar.scss

@@ -7,17 +7,13 @@
   margin-right: 16px;
 }
 
-.hideSidebar .svg-icon {
-  margin-right: 0;
-}
-
 .hideSidebar .el-submenu>.el-submenu__title,
 .hideSidebar .submenu-title-noDropdown {
   padding-left: 10px!important;
 }
 
 .hideSidebar .submenu-title-noDropdown span,
-.hideSidebar .el-submenu>.el-submenu__title span {
+.hideSidebar .el-submenu>.el-submenu__title>span {
   height: 0;
   width: 0;
   overflow: hidden;
@@ -32,6 +28,7 @@
     height: auto;
     width: auto;
     visibility: visible;
+    display: inline;
   }
   .el-submenu__icon-arrow {
     display: block!important;
@@ -65,6 +62,8 @@
       visibility: visible;
       position: absolute;
       right: -145px;
+      text-align: left;
+      text-indent: 20px;
       top: 0px;
       background-color: #1f2d3d;
       opacity: 1;

src/views/layout/Layout.vue

@@ -51,9 +51,6 @@
 			left: 0;
 			z-index: 1001;
 			background: red;
-			// overflow-y: auto;
-			&::-webkit-scrollbar {display:none}
-
 		}
 		.main-container {
 			min-height: 100%;

src/views/layout/SidebarItem.vue

@@ -10,7 +10,7 @@
 
 			<el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
 				<template slot="title">
-					<icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span slot="title">{{item.name}}</span>
+					<icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span>{{item.name}}</span>
 				</template>
 				<template v-for="child in item.children" v-if='!child.hidden'>
 
@@ -18,7 +18,7 @@
 
 					<router-link v-else :to="item.path+'/'+child.path">
 						<el-menu-item :index="item.path+'/'+child.path">
-							<span slot="title">{{child.name}}</span>
+								<icon-svg v-if='child.icon' :icon-class="child.icon"></icon-svg><span>{{child.name}}</span>
 						</el-menu-item>
 					</router-link>