解决element-plus树形横向,竖向滚动进度条

<template>
    <div class="treeMain">
        <div class="input">
            <el-input v-model="filterText" placeholder="输入需要查找的图层" />
        </div>
        <div class="scrollClass">

            <el-scrollbar style="height:100%">
                <el-tree :data="data" :props="defaultProps" :default-expanded-keys="[2, 3]"  />
            </el-scrollbar>
        </div>

    </div>
</template>

<script setup >

const defaultProps = {
    children: 'children',
    label: 'label',
}
const data = [
    {
        label: 'Level one 1',
        children: [
            {
                label: 'Level two 1-1',
                children: [
                    {
                        label: 'Level three 1-1-1',
                    },
                ],
            },
        ],
    }
    
    
]



onMounted(() => {

})

</script>
<style scoped lang='scss'>
.input {
    padding: 10px;
}


.treeMain {
    height: 100%;
    flex: 1;
    padding: 0px 5px 10px 5px;
    // overflow: hidden;

}

.scrollClass {
    width: 100%;
    //一定要设置高度，根据自己的需求调整
    // 输入框的52px
    height: calc(100% - 52px);
    overflow: auto;

    :deep(.el-tree-node>.el-tree-node__children) {
        overflow: inherit !important;
    }
}
</style>