解决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>
相关推荐
还是大剑师兰特2 小时前
Vue3 中的 defineExpose 完全指南
前端·javascript·vue.js
xkxnq3 小时前
第六阶段:Vue生态高级整合与优化(第93天)Element Plus进阶:自定义主题(变量覆盖)+ 全局配置与组件按需加载优化
前端·javascript·vue.js
A黄俊辉A4 小时前
vue css中 :global的使用
前端·javascript·vue.js
终端鹿8 小时前
Vue2 迁移 Vue3 避坑指南
前端·javascript·vue.js
SuperEugene9 小时前
TypeScript+Vue 实战:告别 any 滥用,统一接口 / Props / 表单类型,实现类型安全|编码语法规范篇
开发语言·前端·javascript·vue.js·安全·typescript
还是大剑师兰特9 小时前
Vue3 报错:computed value is readonly 解决方案
前端·vue.js
北寻北爱11 小时前
前端加密解密- base64、md5、sha256、AES
前端·vue.js
spencer_tseng12 小时前
Vue node_modules
javascript·vue.js
SuperEugene12 小时前
前端 console 日志规范实战:高效调试 / 垃圾 log 清理与线上安全避坑|编码语法规范篇
开发语言·前端·javascript·vue.js·安全
发现一只大呆瓜12 小时前
Vue - @ 事件指南:原生 / 内置 / 自定义事件全解析
前端·vue.js·面试