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

最新推荐文章于 2025-02-27 10:51:09 发布
最新推荐文章于 2025-02-27 10:51:09 发布
阅读量1.7k 收藏 5
点赞数 6
分类专栏： element 文章标签： vue.js css javascript elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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;
}

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

Vue项目里设置el-tree默认选中的背景色和字体色以及鼠标悬停的背景色
qq_37635012的博客
02-13 7771
【代码】Vue项目里设置el-tree默认选中的背景色和字体色。
el-tree树结构选中编辑和取消选中效果
m0_37714008的博客
06-15 3547
问题： 当时因为要写取消选中的效果，但因.el-tree-node:focus中focus属性导致样式一直达不到想要的效果；即取消选中后仍会有个浅色背景存在，当失去焦点是才会消失。 解决： 改前自带样式： .el-tree-node:focus>.el-tree-node__content { background-color: #F5F7FA; } 改后： .el-tree-node:focus > .el-tree-node__content { back.
el-tree文本内容过多显示不完全问题（解决）
weixin_30565327的博客
07-05 3300
布局： <span class="custom-tree-node" slot-scope="{ node, data }"> 外层span 树节点 <span :title="node.label" class="em-tree-text">{{ node.label }}</span> 内层span(用于文本内容显示) <span&...
el-tree文本太长，文字溢出处理，鼠标移上去显示全部内容，且只有溢出的文本
weixin_43731788的博客
06-05 1191
鼠标移上去方法，写在methods：{}里面。
ruoyi vue el-elementui el-tree 自适应宽度向左浮动
最新发布
热爱蛋炒饭的博客
02-27 400
ruoyi vue el-elementui el-tree 自适应宽度向左浮动。直接上效果图 ,这是根据宽度，向左浮动的。打开的效果，子节点默认不变。
使用Element UI 开发页面遇到的问题之Tree树形结构节点过长显示不完全问题
sinat_41694829的博客
05-15 1万+
1.Tree树形结构节点过长显示不完全问题 这个问题怎么解决呢，本身element框架里自带的是文字过长直接就隐藏了，但是需求写起来肯定不会这样写，一般情况下我们会选择换行显示，但是我觉得换行不美观，所以选择"…"来显示文字内容没有完全显示，然后鼠标移上去再通过"title"显示出来，话不多说，直接上代码。 1.html格式代码 html和文档里的格式不一样，因为这里是采用的span标签来加载数据...
elementUI 中tree的节点文字过长显示不全的解决办法
u011004827的博客
04-15 3941
elementUI 中tree的节点文字过长显示不全的解决办法：使用el-scrollbar <el-scrollbar> <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode"
Element UI Tree树形结构节点过长时-换行显示
weixin_57246351的博客
04-24 4531
换行显示 <template> <div> <div class="tree"> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true" ></el-tree> </div> </div> </template> <script
el-tree结合el-table，树形添加修改操作
SDAW_1的博客
07-04 1982
。。。。。。。。。。。。
vue+ elelment-ui +tree树形组件背景颜色的修改，点击节点背景颜色修改设置为其他颜色，或是样式不生效的原因
热门推荐
王阿储的博客
03-17 2万+
本文仅作为我在初次学习vue+element-ui路上碰到的一些问题以及解决的办法的记录，不论问题的难易程度，于我而言是一种成长过程的记录，望大佬勿喷。 vue+ elelment-ui +tree树形组件背景颜色的修改，直接在Element官网拷贝过来的树形组件背景颜色是白色，每次点击以及鼠标悬浮上后会有一个偏灰的背景颜色。如图 但是如果我需要用树形组件放在一个黑色背景或其他背景颜色时，树形自...
elementUI的el-tree，el-table和el-pagination，el-radio之魔改篇
qq_43704345的博客
11-27 1142
1.el-tree html <div class="column"> <div class="column_search"> <el-input class="input_style" v-model="filterWord" placeholder="搜索" size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
el-tree组件中当节点内容超过长度显示横向滚动条的问题
linhuchong_blog的专栏
12-23 2654
参考 el-tree显示横向滚条的问题 问题描述 最近的项目使用Element-UI作为前端UI框架时，借助el-tree组件实现树形菜单时，父容器规定了宽高，设置overflow:auto,但是当节点显示的文本超过定义的长度时，横向滚动条并未显示； 解决方案 出现该问题的原因是el-tree组件中class名为el-tree-node的div是块级元素，需要把它变为inline-block，,所以覆盖element的样式： .el-tree { width: 100%; ove.
vue3+ts+element-plus 中el-tree树形菜单内容过长处理（截取成...并鼠标指上去提示）
yioye的博客
12-07 2991
Vue3+ts+Element-Plus 中el-tree树形菜单内容过长处理（截取成...并鼠标指上去提示el-tooltip）
elementui tree 层级过多时，高亮状态无法选满整行
嗝~
08-29 1122
添加高亮状态的 div 并没有随着子级的展开而适应宽度，所有的tree-node 的宽度在初始化的时候就固定了。通过fit-content 可以将宽度随着内容撑开，而min-width 会保证没有那么多层级时也可以左右排布。（treeWidth 表示的是整个tree 容器的宽度，要是需要留有间隙，可以减去 10 或者 20 像素）如上图所示，官方的tree组件，在层级很多时 elementui -tree 的高亮状态并没有选中整行。此时只需要tree根据弹窗自动铺满就好了，不用考虑min-width。
第三十五篇：element UI tree 树图文字过多超出隐藏带...鼠标经过显示超出的文字
maliyao4233的博客
10-20 1479
问题说明：tree树状图展开的时候问题太长被覆盖。methods:鼠标经过事件。
el-tree 标题文本太长，文字显示不全处理办法
weixin_43731788的博客
06-05 805
给span标签添加样式，通过…
Vue element-ui中 table表格过长内容隐藏显示
cdfdfgrd的博客
06-07 1391
Vue element-ui中 table表格过长内容隐藏显示
element-ui el-tree 文本超出显示省略号 添加移入提示
————————————————————————————————
11-15 1791
element-ui el-tree 文本超出显示省略号 添加移入提示
element ui的el-tree文字显示不全的解决办法
Beam
11-20 2万+
element ui的el-tree文字显示不全的解决办法方法一： 最简单的设置横向滚动条方法二： 添加拖拽条改变外层容器宽度方法三： 通过...表示 鼠标移上去显示全称 使用element ui的树组件el-tree时，经常出现如下问题： el-tree渲染时因为文字内容长度不一致，导致过长的文字无法显示完全。 经尝试发现如下三种解决方法，推荐方法三。 方法一： 最简单的设置横向滚动条 效果：...
el-tree背景色
01-06
### 设置 Element UI `el-tree` 组件的背景颜色 为了设置 `el-tree` 组件的背景颜色，可以通过自定义 CSS 或者 SCSS/Less 来覆盖默认样式。具体方法如下： #### 方法一：全局样式调整 如果希望在整个项目中统一应用新的背景色，则可以在项目的公共样式文件（如 `app.css` 或 `styles.less`）中添加以下代码[^2]。 ```css /* 修改整个 tree 的背景 */ .el-tree { background-color: #f9fafc; } /* 如果还需要修改节点内部容器的颜色 */ .el-tree-node__content { background-color: transparent !important; /* 节点点击后的选中状态保持透明或其他指定颜色 */ } ``` #### 方法二：局部作用域内修改 当只需要针对某个特定页面或组件内的 `el-tree` 更改其外观时，在该组件对应的 `<style>` 标签下加入相应规则即可。需要注意的是要确保这些样式仅对该实例生效而不影响其他地方使用的相同组件[^3]。 ```html <template> <!-- ... --> </template> <script setup> // ... </script> <style scoped lang="scss"> @import "~element-plus/lib/theme-chalk/index.css"; .custom-tree-container { .el-tree { background-color: #eef1f6; ::v-deep(.el-tree-node__content) { // 对于较新版本可能需要使用 :deep() 替代 ::v-deep() &:hover, &.is-current { color: white; background-color: rgb(64, 158, 255)!important; } } // 额外定制化需求可以继续补充更多选择器... } } </style> ``` 通过上述两种方式之一就可以成功更改 `el-tree` 控件的整体视觉效果中的背景部分了。记得测试不同浏览器下的显示情况以确认兼容性和预期行为一致[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值