即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`标签包裹 |
Comments | NOTHING