element ui 组件el-scrollbar

el-scrollbar 组件

当组件中内容过多时，展开后会产生滚动条影响外部整体样式，这个时候需要将滚动条放在组件内部，不让其变化影响其他组件。el-scrollbar可以实现这个功能

el-scrollbar实现菜单内部滚动条

<el-scrollbar style="height:100%;">
        <el-menu
          class="sidebar-el-menu"
          default-active="1-4-1"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          unique-opened
          router
        >
 </el-scrollbar>

注意：
外部组件是有高度的，el-scrollbar可以直接设置为占满高度

style="height:100%;"

横向也可能会有滚动条产生，el-scrollbar需要设置为超出部分隐藏
el-scrollbar__wrap为其内部样式

/* 覆盖scrollbar中 overflow: scroll; 会导致横向滚动条*/
.el-scrollbar__wrap {
    overflow: hidden;
}

效果

调整前，会挤边

调整后，内部滚动条