ElementUI隐藏组件滚动条

当页面遇到需要滚动条的时候，浏览器自带的滚动条不够美观，达不到自己的需求。那么elementUI自带的隐藏组件el-scrollbar一定要尝试下，具体使用如下：

文章目录

文章目录

一、代码参考

1、el-scrollbar组件使用

2、css样式修改

二、注意事项

总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、代码参考

1、el-scrollbar组

件使用

<div class="head-container" style="height:calc(100vh - 200px)">
  <el-scrollbar > 
    <el-tree
      :data="deptOptions"
      :props="defaultProps"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
      default-expand-all
      @node-click="handleNodeClick"
    />
  </el-scrollbar>
</div>

说明： div盒子包含一个el-tree树组件，div给定行内样式高度；树组件渲染的高度大于div，那么可以使用el-scrollbar组件覆盖浏览器默认的滚动条

2、css样式修改

<style lang="scss" scoped>
  .el-scrollbar {
    height: 100%;
  }
  .el-scrollbar__wrap {
    overflow: scroll;
    width: 110%;
    height: 120%;
  }
</style>

问题点：x轴滚动条样式无法隐藏

解决办法：1、去除style中的scoped属性  2、外部引入上面css样式

二、注意事项

根据需要的滚动条，外层的盒子需要给到对应的width或height

---

总结

        关于el-scrollbar组件的使用以及注意的地方就说到这儿，有存在不正确的地方，请大佬多多指正！