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

蔚落 2023-01-15 09:26 616阅读 0赞

如题，在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">
            
            <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>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20221022/350662ca4a984892b3ecb97d20134574.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]: /images/20221022/5944e81a77e640b9a4c3e6b39857b448.png

发表评论取消回复

表情：

评论列表（有 0 条评论，616人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp实现横向滚动样式条

uniapp实现横向滚动样式条简介：本文讲解，uniapp如何实现横向滚动样式条。运行代码： <template> <view class="c

ゞ浴缸里的玫瑰/ 2024年03月31日 09:19/ 0 赞/ 55 阅读

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

如题，在el-tree所处的代码块中，加入滚动条，使其能够滚动使用overflow:scroll 即可 overflow定义:设定如果内容溢出元素设定范围后该怎么做.

蔚落/ 2023年01月15日 09:26/ 0 赞/ 617 阅读

相关 css 隐藏滚动条竖向y滚动，横向x不滚动

.bottom { overflow-x: hidden; overflow-y: scroll; } 参考博客：

左手的ㄟ右手/ 2022年09月09日 14:51/ 0 赞/ 249 阅读

相关解决el-tree横向滚动条问题

解决el-tree横向滚动条问题参考文章： [（1）解决el-tree横向滚动条问题][1_el-tree] （2）https://www.cnblogs.com/mi

柔光的暖阳◎/ 2022年09月04日 12:59/ 0 赞/ 522 阅读

相关 DIV实现纵向滚动条

DIV实现纵向滚动条overflow-y:scroll的使用， 1.首先设置固定div的宽高 2.overflow-y:scroll 如果设置overflow:auto

约定不等于承诺〃/ 2022年08月18日 02:18/ 0 赞/ 225 阅读

相关 div 滚动条同步控制 div 滚动条滚动

<html> <head> <title>div scroll</title> <mce:style type="text/css"><!-- DIV \{width:200;

系统管理员/ 2022年07月13日 11:17/ 0 赞/ 323 阅读

相关【easyui】datagrid横向滚动条自动滚动功能

在datagrid的onLoadSuccess函数中，做如下处理 //根据当前时刻，判断滚动条滑动的位置 var myDate

分手后的思念是犯贱/ 2022年06月16日 07:19/ 0 赞/ 1315 阅读

相关 iframe的滚动条问题：显示/隐藏滚动条

1. XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

冷不防/ 2022年02月15日 15:29/ 0 赞/ 444 阅读

相关 uniapp如何设置横向滚动，而且没有滚动条

> 设置横向滚动 overflow-x: auto; display: -webkit-box; overflow-y: hidden; > 隐藏横

今天药忘吃喽~/ 2021年07月24日 23:14/ 0 赞/ 1512 阅读

相关 table添加横向滚动条

<div style="width:1000px; height:200px; overflow:scroll;"> <table border="1" rule...

你的名字/ 2021年03月25日 14:53/ 0 赞/ 810 阅读