el-tree 解决横向滚动条和纵向滚动条问题

如题,在el-tree所处的代码块中,加入滚动条,使其能够滚动

使用overflow:scroll 即可

overflow定义:设定如果内容溢出元素设定范围后该怎么做.

overflow:visible;默认属性,就是毫不作为,让内容跑到元素外面去.
overflow:hidden;常用属性,超出的部分给他隐藏了.
overflow:auto;常用属性,父元素中内置滚动条来处理,根据内容的具体宽高生成上下或左右滚动条.
overflow:scroll;在父元素中强制内置滚动条,即使内容并没有超出元素给定宽高.
overflow: inherit; 继承父元素的属性,可用于在父元素有滚动条的前提下,给子元素中内置滚动条

<style>
div {
     width: 250px;
     height: 400px;
     background-color: pink;
     float: left;
     margin-left: 100px;
     margin-top: 50px;
 }

 .div1 {
     /* 超出的部分隐藏 */
     overflow: hidden;
 }
 .div2{
     overflow:visible;
     /* 默认值 写了这个和没写 没什么区别 */
 }
 .div3{
     overflow:auto;
     /* 内容超出 显示滚动条   包括横纵向滚动条*/
 }
 .div3 p{
     width:300px;
 }

 .div4{
     /* 不管内容有没有超出 都要显示滚动条 */
     overflow:scroll;
 }
 /* .div5{
     overflow:scroll;
 }
 .div5 p{
     overflow:inherit;
 } */
 .div5{
     overflow-x:scroll;
     overflow-y:auto;
     /* overflow-x 横向滚动条 
         overflow-y 纵向滚动条
         他们的取值 和 overflow 一样
      */
 }
</style>

直接上代码

<script>
  <div class="leftBox" slot="mainBodyLeft">
    <el-input placeholder="输入关键字进行过滤"
              v-model="filterText"
              class="searchContent"
              suffix-icon="el-icon-search">
    </el-input>
    <div class="left" style="width: 100%;">
      <el-tree class="filter-tree"
               :data="assetTree"
               highlight-current
               :props="defaultProps"
               :filter-node-method="filterNode"
               @node-click="handleNodeClick"
               node-key="bizid"
               :default-expanded-keys="openArr"
               :expand-on-click-node="false"
               ref="assetTree">
        <!-- :style="{height:treeHeight + 'px'}" -->
        <span slot-scope="{ node }">
          <span>
           {{ node.label }}
          </span>
        </span>
      </el-tree>
    </div>
  </div>
 </script>
<style>
.filter-tree {
  /* border: 1px solid #dcdfe6; */
  min-width: 100%;
  display: inline-block;
  overflow: auto;
  margin-top: 12px;
}

.filter-tree span {
  font-size: 16px;
  display:block;
  overflow:hidden;
  // word-break:keep-all;
  // white-space:nowrap;
  //  text-overflow:ellipsis;
   padding-right: 12px;
}
.leftBox {
  // float: left;
  // width: 20%;
  height: 100%;
  width: 100%;
}
.left {
  height: calc(100% - 45px);
  overflow: auto;
}
</style>

效果图:
在这里插入图片描述

在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值