Vue使用Element UI自带的滑动组件el-scrollbar

PS:这个组件在官方文档中没有,但是可以直接使用;参考下面例子

<template>
  <el-container class="index-con" v-if="isRouterAlive">
    <el-aside :class="showclass">
      <leftnav></leftnav>
    </el-aside>

    <el-container class="main-con">
      <el-header class="index-header">
        <navcon :breadList="breadList"></navcon>
      </el-header>

      <el-scrollbar style="height: 100%;width:100%">
        <el-main class="index-main">
          <!-- <router-view></router-view> -->
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive" :key="key"></router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive" :key="key"></router-view>
        </el-main>
      </el-scrollbar>
    </el-container>
  </el-container>
</template>

1.需要注意的是,height和width都要是100%
2.需要再使用的地方样式覆写
.el-scrollbar__wrap {
  overflow-x: hidden;
}

注意PS: 这么做,会引发select组件,无法显示完全

此时需要覆写样式

.el-select-dropdown .el-scrollbar .el-scrollbar__wrap {
  overflow: scroll !important;
}