element 中树形控件滚动条问题

在使用element ui中树形控件时，当页面缩小的时，树形控件没有竖向滚动条，而且横向滚动条相比来说样式会有点难看，需要调整一下。

<div class="scrollClass">
    <el-scrollbar style="height:100%">
      <el-tree
        ref="treeRef"
        node-key="id"
        class="video-tree"
        :data="data"
        show-checkbox
        :props="defaultProps"
        :default-expanded-keys="[4]"
        :filter-node-method="filterNode"
        @check-change = "getCheckedNodes"
      />
    </el-scrollbar>
 </div>

需要对样式进行调整：

需要注意的是：

1.一定要对最外层盒子 scrollClass 设置宽和高；

2.el-scollbar 的高度设置100%；

3.在vue3 中，如果使用了 scoped，为了保证样式生效，需要使用深度选择器。

<style lang="scss" scoped>
.scrollClass{
  //一定要设置高度，根据自己的需求调整
  height: 40vh;
}

//把原有的横向滚动条隐藏
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}

// 树形结构添加横向滚动条
::v-deep .el-tree>.el-tree-node{
   width: 120%;
   display:inline-block;
}

</style>

实现的效果如下：