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>

实现的效果如下:

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值