elementui树状图横向滚动条不出来、el-tree横向滚动条

在使用 ElementUI 的组件时，有时会遇到树状图内容过长导致横向滚动条无法正常显示的问题。本文将介绍几种解决方法，帮助你快速定位并解决问题。

解决方案概述

解决横向滚动条不显示的问题，可以通过以下几种方法：

方法一：设置容器的固定宽度

HTML 结构

CSS 样式

css.tree-container {width: 400px; /* 设置固定宽度 */overflow-x: auto; /* 开启横向滚动 */}

JavaScript 代码

javascriptexport default {data() {return {data: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]}, {label: '一级 2',children: [{label: '二级 2-1',children: [{label: '三级 2-1-1'}]}, {label: '二级 2-2',children: [{label: '三级 2-2-1'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}};

方法二：使用 CSS 样式

HTML 结构

html

CSS 样式

css.custom-tree {display: inline-block;white-space: nowrap; /* 防止换行 */overflow-x: auto; /* 开启横向滚动 */}

JavaScript 代码

javascriptexport default {data() {return {data: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]}, {label: '一级 2',children: [{label: '二级 2-1',children: [{label: '三级 2-1-1'}]}, {label: '二级 2-2',children: [{label: '三级 2-2-1'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}};

方法三：调整的样式属性

HTML 结构

html

CSS 样式

css.el-tree {display: inline-block;white-space: nowrap; /* 防止换行 */overflow-x: auto; /* 开启横向滚动 */}

JavaScript 代码

javascriptexport default {data() {return {data: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]}, {label: '一级 2',children: [{label: '二级 2-1',children: [{label: '三级 2-1-1'}]}, {label: '二级 2-2',children: [{label: '三级 2-2-1'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}},mounted() {This.$refs.tree.$el.style.whiteSpace = 'nowrap';this.$refs.tree.$el.style.overflowX = 'auto';}};

通过以上几种方法，你可以有效地解决横向滚动条不显示的问题。选择适合你项目需求的方法进行实现即可。希望这些解决方案对你有所帮助！

div如何控制只出现垂直滚动条

div有很多滚动条样式，如果只要垂直的话，参考如下：css写法：

我在css里设置div width=100%，padding=10px，为何会出现横向滚动条？但去掉padding就好了

为什么bai会多出20个像素 padding:10px; 等于padding:10px 10px 10px 10px; 分别对应上 右 下左，dupadding的作用 是zhi 在当前宽度dao的情况下 去 追加 padding的像素值。也就是说 你的宽度100%，再加专上padding:10px; 他的实际宽度就是 100%+20px; 希望对你有帮助属不懂的地方可以 追问

滚动条上不去

可能卡机了或是反应慢，再者就是鼠标问题