elementUI的el-scrollbar

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

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

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了ElementUI中的el-scrollbar组件，它是一个隐藏的滚动条组件。使用时需要注意其父层需有固定高度，el-scrollbar自身高度设为100%，并可能需要设置overflow-x:hidden来消除横滚动条。组件提供了如native, wrapStyle, wrapClass等7个props属性用于定制。示例展示了如何在el-scrollbar内嵌套el-tree组件。源码可在ElementUI的packages/scrollbar目录下查看。

概念

el-scrollbar(滚动条组件)：是Element UI隐藏组件

在这里插入图片描述

注意事项：

1.el-scrollbar的父层要有固定高度

2.el-scrollbar的高度要设成100%

3.如果出现横滚动条，添加overflow-x:hidden;

属性

el-scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性

props: {
    native: Boolean,  // 是否使用本地，设为true则不会启用element-ui自定义的滚动条
    wrapStyle: {},  // 包裹层自定义样式
    wrapClass: {},  // 包裹层自定义样式类
    viewClass: {},  // 可滚动部分自定义样式类
    viewStyle: {},  // 可滚动部分自定义样式
    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {  // 生成的标签类型，默认使用 `div`标签包裹
      type: String,
      default: 'div'
    }
}

例

<el-scrollbar 
      wrap-class="list" wrap-style="overflow-x:hidden;" 
      view-class="view-box" view-style="font-weight: bold;height:100%;" 
      :native="false">
        <el-tree
          class="tree"
          :data="menuItems"
          node-key="id"
          :default-expanded-keys="expandedKeys"
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
          :expand-on-click-node="false"
          :render-content="renderContent"
        >
        </el-tree>
</el-scrollbar>