如題，在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>
效果圖：
