在使用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>
实现的效果如下: