解决element el-tree(树形结构)内容太长背景色覆盖不全的问题

最新推荐文章于 2024-06-19 14:05:20 发布
最新推荐文章于 2024-06-19 14:05:20 发布
阅读量1.5k 收藏 5
点赞数 6
分类专栏： element 文章标签： vue.js css javascript elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50418353/article/details/122047146
版权

问题:
在这里插入图片描述
原因: div出现滚动条之后宽度无法达到文字一样长

解决方法: 选中 el-tree 的 .el-tree-node 类名设置 min-width: max-content 最小宽度=内容宽度

/* 树形结构内容太长背景色覆盖不全 */
.orgnTree /deep/ .el-tree--highlight-current .el-tree-node {
  min-width: max-content;
}

效果:
在这里插入图片描述

家里一只小秃鸡
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementui:el-tree节点文字内容过长时，无法正常显示(已解决)
weixin_32629733的博客
10-26 1万+
最近做项目新接到的前端需求，发生的问题是：在页面左侧的树形节点上，当文字内容过长时，节点内容会超出外部容器无法正常显示，现在的需求是，要求左侧内容栏宽度固定不变，当内部叶子节点的内容超过外部容器时，做省略处理。 处理之前 处理之后 代码如下： <el-tree node-key="0" :props="defaultProps" :load="getTrees" lazy @node-click="nodeClick" ref="resourcesTree"
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-tree 溢出隐藏
weixin_50540540的博客
08-31 933
element el-tree 横向纵向溢出隐藏
elementui tree 层级过多时，高亮状态无法选满整行
嗝~
08-29 900
添加高亮状态的 div 并没有随着子级的展开而适应宽度，所有的tree-node 的宽度在初始化的时候就固定了。通过fit-content 可以将宽度随着内容撑开，而min-width 会保证没有那么多层级时也可以左右排布。（treeWidth 表示的是整个tree 容器的宽度，要是需要留有间隙，可以减去 10 或者 20 像素）如上图所示，官方的tree组件，在层级很多时 elementui -tree 的高亮状态并没有选中整行。此时只需要tree根据弹窗自动铺满就好了，不用考虑min-width。
element-ui中el-tree的父元素设置好宽度后不能被子内容撑开的问题 el-tree宽度
最新发布
m0_73430799的博客
06-19 149
所以下边的div内容撑不起来，而且.el-tree-node__children的overflow属性是hedden，所以下边的内容一多就自动隐藏了；原因分析： 因为.el-tree-node__content的 display默认的是。设置完父级的宽度之后，el-tree将不能被撑开，一旦子树的内容太长就显示不出来了；
el-tree文本内容过多显示不完全问题（解决）
weixin_30565327的博客
07-05 3234
布局： <span class="custom-tree-node" slot-scope="{ node, data }"> 外层span 树节点 <span :title="node.label" class="em-tree-text">{{ node.label }}</span> 内层span(用于文本内容显示) <span&...
使用Element UI 开发页面遇到的问题之Tree树形结构节点过长显示不完全问题
sinat_41694829的博客
05-15 1万+
1.Tree树形结构节点过长显示不完全问题 这个问题怎么解决呢，本身element框架里自带的是文字过长直接就隐藏了，但是需求写起来肯定不会这样写，一般情况下我们会选择换行显示，但是我觉得换行不美观，所以选择"…"来显示文字内容没有完全显示，然后鼠标移上去再通过"title"显示出来，话不多说，直接上代码。 1.html格式代码 html和文档里的格式不一样，因为这里是采用的span标签来加载数据...
elementUI 中tree的节点文字过长显示不全的解决办法
u011004827的博客
04-15 3714
elementUI 中tree的节点文字过长显示不全的解决办法：使用el-scrollbar <el-scrollbar> <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
第三十五篇：element UI tree 树图文字过多超出隐藏带...鼠标经过显示超出的文字
maliyao4233的博客
10-20 1085
问题说明：tree树状图展开的时候问题太长被覆盖。methods:鼠标经过事件。
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
Element-ui的el-tree组件是Vue.js开发中常用的一个树形控件，它提供了丰富的功能，如懒加载、自定义增删改以及局部刷新等。在本文中，我们将深入探讨如何利用这些特性来实现一个功能完善的树形控件。 首先，让我们...
Element的el-tree控件后台数据结构的生成以及方法的抽取
10-15
Element的el-tree控件是基于Vue.js的前端组件库Element UI中的一个强大功能，用于展示层次结构的数据，如目录、组织架构等。el-tree控件的后台数据结构生成和方法抽取是实现动态加载、异步数据加载以及树状数据操作...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
在Element-ui中，`el-tree`是一个非常常用的组件，用于展示层级关系的数据。在实际开发过程中，我们常常需要动态地新增或删除树形结构中的节点，并确保这些操作后树能够正确地更新显示。本文将详细讲解如何在Element...
el-tree节点内容过长，设置横向滚动条时，内长外短，导致el-tree不能正常产生横向滚动条
string佳佳的博客
03-06 1830
是因为内节点没有把外面的父级撑宽，解决办法如下： .el-tree>.el-tree-node{ min-width:100%; display: inline-block; }
Element UI Tree树形结构节点过长时-换行显示
weixin_57246351的博客
04-24 3793
换行显示 <template> <div> <div class="tree"> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true" ></el-tree> </div> </div> </template> <script
element ui的el-tree文字显示不全的解决办法
热门推荐
Beam
11-20 2万+
element ui的el-tree文字显示不全的解决办法方法一： 最简单的设置横向滚动条方法二： 添加拖拽条改变外层容器宽度方法三： 通过...表示 鼠标移上去显示全称 使用element ui的树组件el-tree时，经常出现如下问题： el-tree渲染时因为文字内容长度不一致，导致过长的文字无法显示完全。 经尝试发现如下三种解决方法，推荐方法三。 方法一： 最简单的设置横向滚动条 效果：...
elementui el-tree横向滚动
lml_little的博客
07-22 810
flex布局横向滚动条
el-element el-tree超出宽度显示横向滚动条问题(已解决)
mia0303的博客
02-20 4905
el-element el-tree超出宽度显示横向滚动条问题-已解决页面画完之后发现el-tree的宽不够了,导致文本超出,本来打算css换行处理,后看到官方的issues里有解决方案, 显示横向滚动条没加之前的样式加过之后的样式解决方法 在css里加上这样一段如果没有生效的话就在el-tree外面加个class为**的盒子 页面画完之后发现el-tree的宽不够了,导致文本超出,本来打算css换行处理,后看到官方的issues里有解决方案, 显示横向滚动条 参考链接 https://github.co
element-ui的el-tree横向滚动条显示不出来。美化滚动条样式
小秋的博客
12-18 3199
图中没有横向滚动条，而且内容还被遮盖。 解决办法 .el-tree{ display:inline-block； min-width:100%； } 我这个滚动条用的是自定义的，为了让滚动条好看点就找了element的用法很简单 <divstyle="float:right;width:150px;height:200px;margin-r...
elementui Tree组件自定义树内容后超出宽度不出现滚动条
波客
01-08 3834
经过检查发现是因为设置了display:flex;导致的，只需要加上align-self:baseline;即可撑开宽度，然后将el-tree设置overflow:auto ::v-deep { .el-tree { overflow: auto } .el-tree-node__content { align-self: baseline; } } ...
element树形Tree控件激活状态背景色修改
06-07
要修改element的Tree控件的激活状态背景色，可以使用以下方法： 1. 使用CSS样式来修改背景色。可以通过修改.el-tree-node.is-current的background-color属性来改变激活状态背景色。例如： ``` .el-tree-node.is-current { background-color: #B7D9FF; } ``` 2. 通过设置theme来修改背景色。可以在theme中设置el-tree-node__content.is-current的background-color属性。例如： ``` { "el-tree-node__content.is-current": { "background-color": "#B7D9FF" } } ``` 这两种方法都可以实现修改element的Tree控件激活状态背景色的效果，具体使用哪种方法取决于你的个人喜好。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值