tips: elementUI官网未暴露滚动条这个组件,但是是可以引入elementUi后直接使用的。
<template>
<div class="my_personal_scroll">
<el-scrollbar style="height:800px" ref="scroll">
<div>
<el-table></el-table>
<el-divider></el-divider>
...content
</div>
</el-scrollbar>
</div>
</template>
//scrollBar里面可以放很多其他组件,切记一定要给其设置一个高度,可以给定高度,也可以从父组件继承100%,但必须设置,否则组件无效。
根据需要设置滚动条,添加样式即可,vue文件中不生效则去全局的element-ui.scss中设置
.my_personal_scroll {
.el-scrollbar__wrap{
overflow-x: hidden;
}
}
//全局设置时,添加自己的文件中设置的类名,防止对全局的scrollBar样式进行覆盖
常用属性:
props: {
native: Boolean, // 是否使用本地,设为true则不会启用element-ui自定义的滚动条
wrapStyle: {}, // 包裹层自定义样式
wrapClass: {}, // 包裹层自定义样式类
viewClass: {}, // 可滚动部分自定义样式类
viewStyle: {}, // 可滚动部分自定义样式
noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
tag: { // 生成的标签类型,默认使用 `div`标签包裹
type: String,
default: 'div'
}
}
//个人觉得自定义样式通常使用在el-scrollbar中包裹的元素类型都为一种的情况下,所以按需决定是否设置wrap、view的style和class吧
使用ref获取scroll对象从而控制滚动高度
this.$refs['scroll'].wrap.scrollTop = 0 //想滚到哪个高度,就写多少
具体使用可参考链接