解决el-tree横向滚动条问题

最新推荐文章于 2025-06-22 22:08:38 发布
最新推荐文章于 2025-06-22 22:08:38 发布
阅读量454 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： elment
原文链接：https://www.codeprj.com/blog/b75e431.html
本文详细记录了如何解决在使用El-Tree组件时遇到的横向滚动条问题，通过参考两篇博客文章，提供了具体的解决方案和步骤，旨在帮助开发者优化前端界面的显示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

解决el-tree横向滚动条问题

参考文章：

（1）解决el-tree横向滚动条问题

（2）https://www.cnblogs.com/midnight-visitor/p/12017219.html


备忘一下。


仧尐
关注
vue2+elementUI：实现tree横向滚动问题，el-tree怎么设置树节点内容溢出的滚动条？Tree树组件设置横向和纵向滚动条多种解决方案与示例代码（解决横向滚动条不显示、设置无效没用问题）
高级前端工程师
06-22 2293
element-UI el-tree横向滚动条，el-tree 横向滚动条，elementui树组件Tree横向滚动条不出来，vue项目中el-tree ：横向和纵向滚动条设置，添加横向滚动条，elementUI - tree横向滚动问题，vue项目中el-tree 支持横向和纵向滚动条设置，element 树组件 tree 横向纵向滚动条，element-ui中使用el-tree横向滚动条不显示，不产生横向滚动条，css设置无效，滚动条不出来怎么办，解决Element-ui-Tree组件无法出现横向滚动条
el-tree横向纵向滚动条
庭前云落的博客
10-25 2096
给容器一个高度，然后样式加上overflow: scroll，这样纵向滚动条就出来了。el-tree未展开时样式。el-tree展开时样式。横向的加上下面的样式。
el-tree的横向滚动条
zy的博客
11-18 730
【代码】el-tree的横向滚动条。
el-tree设置横向滚动条
song_song0927的博客
01-10 1402
el-tree自定义样式,添加横向滚动条
element el-tree组件设置出现横向滚动条
qq_1872583947的博客
06-03 1515
我的实现方式 .el-tree { background: none !important; box-sizing: content-box; overflow: auto; } ::v-deep { .el-tree-node { /*设置横向滚动条*/ min-width: 100% !important; display: block !important; float: left; } } 网上其他参考解决办法 .el-tree {
vue3+element-plus：实现tree横向滚动问题，el-tree怎么设置树节点内容溢出的滚动条？Tree树组件设置横向和纵向滚动条多种解决方案与代码（解决横向滚动条不显示、设置无效没用）
最新发布
高级前端工程师
06-22 2731
element plus el-tree横向滚动条，el-tree 横向滚动条，element-plus树组件Tree横向滚动条不出来，vue3项目中el-tree ：横向和纵向滚动条设置，添加横向滚动条，element - tree横向滚动问题，vue3项目中el-tree 支持横向和纵向滚动条设置，element 树组件 tree 横向纵向滚动条，element-plus中使用el-tree横向滚动条不显示，不产生横向滚动条，css设置无效，滚动条不出来怎么办，解决Element-plus-Tree组件
el-tree 横向滚动条
05-18
### 实现 `el-tree` 横向滚动条的功能或样式调整 为了实现 `el-tree` 的横向滚动条功能，可以通过 CSS 样式调整来满足需求。以下是几种常见的解决方案： #### 方法一：通过设置 `.el-tree-node` 节点的宽度和显示...
el-tree横向滚动条
08-19
- *1* [el-tree 解决横向滚动条和纵向滚动条问题](https://blog.csdn.net/IT_iosers/article/details/126400762)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
el-tree-v2 横向滚动条
05-13
### 实现 el-tree-v2 的横向滚动条 为了实现 `el-tree-v2` 的横向滚动功能，可以通过 CSS 样式调整树形组件及其父容器的行为。以下是具体的解决方案： #### 方法一：通过固定宽度和溢出控制 可以为 `el-tree-v2` ...
el-tree 每一项内容不压缩出现横向滚动条
Ll307748784的博客
07-03 281
【代码】el-tree 每一项内容不压缩出现横向滚动条。
el-tree横向、纵向滚动条
编程技术分享，Java后端、Vue前端
09-16 1833
<div class="left_block"> <el-input v-model="filterText" placeholder="输入关键字进行过滤"></el-input> <el-tree class="terminal_tree" ref="s...
vue项目中el-tree ：横向和纵向滚动条设置
coinisi_li的博客
08-09 6574
①纵向滚动条容易设置，只需要在el-tree组件中设置height即可。②横向滚动条稍微复杂，如下代码（或者通过js计算）
el-tree 添加横向滚动条
CMDN123456的博客
10-09 353
el-tree 添加横向滚动条
el-tree使用记录，el-tree横向滚动条，只有最后一级可选，筛选功能。
weixin_58580067的博客
11-04 2910
这段过程可谓十分曲折，刚开始因为用惯了ant design的树组件，做到这块的时候想也没想就按照ant design的方法去做了（递归遍历树的数据为其非底层节点添加disabled）。// 递归添加层级及状态// 添加层级，方便后续使用if (item?}else{// 标记为最后一层节点})做完之后去看结果，发现每层都能点击和选中，并没有达到预期的结果，这是内心还是比较平静的，想到两个组件库的实现方法不一样也正常，于是又去浅浅的翻了下文档，就注意到了props这个属性。
el-tree 解决横向滚动条和纵向滚动条问题
qq_59224836的博客
12-28 1673
el-tree 解决横向滚动条和纵向滚动条问题，添加overflow: visible;样式即可
el-scrollbar+el-tree超出宽度出现横向滚动条
hunantai的博客
02-25 802
CSS部分，给el-scrollbar__view设置display: inline-block是重中之重！再结合overflow-x:auto，横向滚动条自然而然就出来啦~1、HTML部分，在el-scrollbar元素上添加 view-style="height:100%;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值