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

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

解决方案概述

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

1. 设置容器的固定宽度：确保包含 el-tree 的容器有固定的宽度，并且开启溢出滚动。
2. 使用 CSS 样式：通过自定义 CSS 样式来控制 el-tree 的滚动行为。
3. 调整 el-tree 的样式属性：修改 el-tree 组件的内部样式，使其支持横向滚动。

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

HTML 结构

html</p>

<div class="tree-container">
  
</div>

<p>

CSS 样式

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


JavaScript 代码

javascript
export 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
<el-tree class="custom-tree" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>


CSS 样式

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


JavaScript 代码

javascript
export 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);
}
}
};


方法三：调整 el-tree 的样式属性

HTML 结构

html
<el-tree ref="tree" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>


CSS 样式

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


JavaScript 代码

javascript
export 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';
}
};


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