解决element ui tree组件不产生横向滚动条

结果是这样的

需要在tree的外层,包一个父组件

html 复制代码
    <div class="tree">
        <el-tree :data="treeData" show-checkbox default-expand-all></el-tree>
    </div>

在css里面这样写,样式穿透按自己使用的css编译器以及框架要求就好

css 复制代码
<style lang="scss">
.tree {
    overflow-y: auto;
    overflow-x: auto;
    width: 500px;
    height: 500px;
    background-color: #ffffff;
    border: #333 solid 1px;
}
.el-tree {
    min-width: 100%;
    display: inline-block !important;
}
::v-deep {
    .el-tree-node > .el-tree-node__children {
        overflow: visible;
    }
}
</style>
相关推荐
★YUI★8 分钟前
学习游戏制作记录(制作系统与物品掉落系统)8.16
学习·游戏·ui·unity·c#
百锦再1 小时前
一文精通 Swagger 在 .NET 中的全方位配置与应用
后端·ui·.net·接口·配置·swagger·访问
HANK2 小时前
KLineChart 绘制教程
前端·vue.js
Juchecar3 小时前
Naive UI 学习指南 - Vue3 初学者完全教程
前端·vue.js
尝尝你的优乐美3 小时前
封装那些Vue3.0中好用的指令
前端·javascript·vue.js
chxii4 小时前
5.4 4pnpm 使用介绍
前端·javascript·vue.js
好好好明天会更好4 小时前
Vue 中 slot 的常用场景有哪些
前端·vue.js
VOLUN5 小时前
PageLayout布局组件封装技巧
前端·javascript·vue.js
anyup5 小时前
🔥 🔥 为什么我建议你使用 uView Pro 来开发 uni-app 项目?
前端·vue.js·uni-app
听风的码6 小时前
Vue2封装Axios
开发语言·前端·javascript·vue.js