element中的el-tree添加纵向滚动条方法

weixin_54820790

已于 2024-07-05 17:32:41 修改

阅读量416

点赞数 2

文章标签： vue.js javascript 前端

于 2024-07-05 17:20:00 首次发布

本文链接：https://blog.csdn.net/weixin_54820790/article/details/140214312

版权

第一种方法:element组件库中有一个隐藏组件 el-scrollbar

高度一定要有

<el-scrollbar class="scrollbarClass">
<el-tree></el-tree>
</el-scrollbar>

.scrollbarClass {
  height: 700px;
}

第二种方法:

给el-tree加上class，必须给高度

 <el-tree class="tree-line"></el-tree>

// 树样式
.tree-line {
  /*设置纵向滚动条、横向滚动条要配合下面的.el-tree-node的样式才能实现*/
  overflow: scroll;
  height: 700px; //必须给
  > ::v-deep.el-tree-node {
    /*设置横向滚动条*/
    min-width: 100%;
    display: inline-block;
    position: relative;
    padding-left: 16px; // 缩进量
    /*设置根节点隐藏*/
    > ::v-deep.el-tree-node__content {
      display: none;
    }
  }
}