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

最新推荐文章于 2025-10-17 14:08:34 发布

原创最新推荐文章于 2025-10-17 14:08:34 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

vue.js

15 篇文章

订阅专栏

这是一个关于Vue组件使用的示例代码，包括el-container、el-aside、el-header、el-scrollbar和router-view的结合应用。特别地，提到了在使用el-scrollbar时需要进行样式覆写以隐藏水平滚动条，但这样会影响到select组件的显示，因此还需额外覆写select组件的样式以确保其正常工作。

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;
}