element ui樹樣式問題

場景1：溢出的時候出現滾動條，橫向和縱向（perfect-scrobar滾動條舉例）

解決辦法：

css添加

.el-tree>.el-tree-node{
    min-width: 100%;
    display: inline-block;
    // display: inline-block !important
}

在容器的外面添加v-scroobar屬性

html

<template>
    <div class="box">
        <div class="box-label">
            <slot name="pagetitle"></slot>
        </div>
        <div class="box-content">
            <div class="box-content-title">
                <slot name="boxtitle"></slot>
            </div>
                <div class="box-content-content" v-scrollbar>
                    <!-- <el-scrollbar>  -->
                        <slot class="scroll-content" name="boxcontent"></slot>
                    <!-- </el-scrollbar>  -->
                </div>
        </div>
    </div>
</template>

 

但是最好在組件的內部加，全局加可能會影響其他現實，例如出現的場景二

 

場景二：當左右橫向溢出后，hover節點的時候會出現長短不一致的現象

解決辦法：

css添加：

    .box-content-content{
        position: absolute;
        top:40px;
        // padding-left:10px;
        height: calc(100% - 40px);
        width:100%;
        box-sizing: border-box;
        overflow: auto;
        .el-tree{//重要
            display: inline-block;//重要
        }
        /deep/ .el-tree__empty-block {
            position: absolute;
            left: 0;
            right: 0;
            min-width: 260px;
            margin: auto;
        }
    }

el-tree上面添加樣式display：inline-block 

但是加上之后看則沒有問題，但是單tree里面沒有數據的時候，就會發現“暫無數據”會顯示有問題，就是因為場景一加上的樣式給影響了，解決辦法就是上面將.el-tree__empty-block覆蓋，最后完美實現