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>
效果图：