el-aside修改下拉条为el-scrollbar

使用elementUI做项目时，经常会用到他的左右结构的容器，尤其是在后台管理系统的页面，就是他的Container 布局容器，左边是el-aside，里面放的是下拉菜单，经常是el-menu
左边的菜单一般是这样的：

这样的默认格式有一个很明显的问题，就是当左侧的菜单展开后很长的时候，就会出现下拉条，而这个默认的下拉条是非常丑的，而且当下拉条从无到有出现的时候，他会凭空占据15px的宽，所以右边的内容会忽然向右移动15px，非常难看。
比较好的解决办法是使用elementUI自带的下拉条el-scrollbar代替原有默认的下拉条，又美观又不会出现错位。
页面代码如下：

<template>
	<div class="admin-index">
	<el-container class="layoutbox">
		<!-- 左侧导航 -->
		<el-aside width="220px" class="left-aside">
			<el-scrollbar  class="myscrollbar">
				  <div class="logo">管理平台</div>
				<el-menu  class="myMenu" background-color="#001529" text-color="#fff" :unique-opened="false">
					<el-submenu v-for="(menu,index) in showMenuList" :key="index" :index="menu.index">
					  <template slot="title"><i :class="menu.iconclass"></i>{{menu.title}}</template>
						<el-menu-item v-for="(menuitem,index) in menu.item" :key="menuitem.index" :index="menuitem.index" @click="navigate(menuitem.url)">
							{{menuitem.itemTitle}}
						</el-menu-item>
					</el-submenu>
				</el-menu>
				</el-scrollbar>
		</el-aside>
		
	  <el-container class="right-container">
		<!-- 右侧头部 -->
			    <el-header>
			      <span class="adminName">{{userInfo.user_name}}</span>
				  <el-link :underline="false" @click="dialogFormVisible=true">修改密码</el-link>
				  <el-link :underline="false" @click="logOut">退出</el-link>
			    </el-header>
	    <!-- 子页面 -->
	    <el-main class="my-el-mail">
			<el-scrollbar  class="scrollbar-table">
				<el-tabs v-model="editableTabsValue" type="card" closable
				@tab-click="tabClick" @tab-remove="removeTab" class="index-tab">
				  <el-tab-pane  v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name" >
				  </el-tab-pane>
				</el-tabs>
			<keep-alive>
				<router-view :key="$route.fullPath" @changeTabTitle="changeTabTitle"></router-view>
			</keep-alive>
			</el-scrollbar>
	    </el-main>
	  </el-container>
	</el-container>
	</div>
</template>

重点要关注的是这些：

<el-container class="layoutbox">
		<!-- 左侧导航 -->
		<el-aside width="220px" class="left-aside">
			<el-scrollbar  class="myscrollbar">
				  <div class="logo">管理云平台</div>
				<el-menu  class="myMenu" background-color="#001529" text-color="#fff" :unique-opened="false">
					<el-submenu v-for="(menu,index) in showMenuList" :key="index" :index="menu.index">
					  <template slot="title"><i :class="menu.iconclass"></i>{{menu.title}}</template>
						<el-menu-item v-for="(menuitem,index) in menu.item" :key="menuitem.index" :index="menuitem.index" @click="navigate(menuitem.url)">
							{{menuitem.itemTitle}}
						</el-menu-item>
					</el-submenu>
				</el-menu>
				</el-scrollbar>
		</el-aside>

CSS如下：

.layoutbox {
	  height: 100vh;
	 background-color: #f0f2f5;
	}
.left-aside{
		background-color:#001529;
		overflow-y: hidden;
	}
.myscrollbar{
	 height: 100%;
	}
	.myscrollbar>>>.el-scrollbar__wrap{
	  overflow-x: hidden;
	}

这里面的窍门在于：
1：将最外层的el-container的样式layoutbox设成height: 100vh;让他的height只有屏幕可见的那么高。
2：将el-aside的overflow-y: hidden;隐藏他原来的丑的下拉条。
3：在el-aside里面（注意不是外面）套一个el-scrollbar，给他的样式height: 100%;这样由于el-scrollbar的下拉条是100%宽度，而最外面的容器高度只有100vh,这样当菜单展开的时候，超出了100vh，el-scrollbar就会出现，el-scrollbar是一种不占位的浮动下拉条，他不会引发页面抖动，也美观。
同理，页面右边的主内容部分的下拉条，也一样可以变成el-scrollbar，就是在el-main里套一个el-scrollbar，道理是一样的，样式如下：

.my-el-mail{
		overflow-y: hidden;
	}
	.scrollbar-table{
	 height: 100%;
	}
	.scrollbar-table>>>.el-scrollbar__wrap{
	  overflow-x: hidden;
	}

活用el-scrollbar，可以有效的改善页面里各种情况下的出现的下拉条，主要窍门就是高度的设置，弄不出来一般都是内外的高度没理清楚，设置不对，就是多想想多试试。