elementUI导航栏增加导航条 el-scrollbar_el-menu 滚动条

原来的样式

当导航栏内容过多时会出现不能将导航栏内容全部展出的现象，如：

增加导航栏滚动条步骤

1、给div增加样式

给导航栏增加滚动条，未增加滚动条时代码如下：

<template>
    <div>
        <el-menu>...</el-menu>
    </div>
</template>

 此时需要给div添加样式，给导航条相对应的宽度和位置

<template>
    <div class="side-bar">
        <el-menu>...</el-menu>
    </div>
</template>
<style lang="less" scoped>
.side-bar {
        width: 200px;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
    }
</style>

2、引入 el-scrollbar标签并应用

给el-menu标签外面添加el-scrollbar标签，并设置样式

<template>
    <div class="side-bar">
        <el-scrollbar style="height: 100%;">
            <el-menu>...</el-menu>
        </el-scrollbar>
    </div>
</template>
<style lang="less" scoped>
.side-bar {
        width: 200px;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
    .el-scrollbar__wrap { // 隐藏横向滚动条
            overflow-x: hidden;
        }
    }
</style>

注：elementUI全局引入时没有引入el-scrollbar，所以需要自己手动引入