elementui的隐藏组件el-scrollBar的使用

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吧

参考链接1 参考源码链接2

使用ref获取scroll对象从而控制滚动高度

this.$refs['scroll'].wrap.scrollTop = 0  //想滚到哪个高度，就写多少

具体使用可参考链接