即elementUI的滚动条,官网文档的组件中并没有给出，但是在源码中存在这个组件。具体使用其实可以看源码，或者百度搜搜看，我把自己使用的一些罗列下：

父元素高度固定的情况下：

<template>
  <div style="height:600px;">//父元素高度固定
    <el-scrollbar style="height:100%">
        <div>
         {{content}}
        </div>
    </el-scrollbar>
  </div>
</template>

父元素高度由子元素撑开的情况下（高度不固定，常用）

<template>
        <div style='height:100%'>
            <el-scrollbar class='scroll'>
                <div class="child></div> //子元素有高度，把父元素撑开
            </el-scrollbar>
        </div>
</template>
<style>
.scroll{
    height: 100%;
}
.scroll .el-scrollbar__wrap {
    overflow-x: auto;
}
</style>

简单说第二种情况，就是子元素撑开父元素，让父元素有高度

  • el-scrollbar 需要配合css使用，它的父元素(外层容器) 必须要有高度（固定/非固定）
  • 并且要设置el-scrollbar 的高度为100%

属性

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

爬。