Element UI中 el-tree 组件 css 实现横向溢出滚动实现

最新推荐文章于 2024-04-28 16:06:00 发布
最新推荐文章于 2024-04-28 16:06:00 发布
阅读量1k 收藏 11
点赞数 5
分类专栏： elementUI css 文章标签： ui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53562074/article/details/136324566
版权

限制 el-tree 的父容器宽度为 100px 之后

  • el-tree 组件内数据溢出后隐藏，
  • 不出现滚动条 、overflow 为 auto 也无效
    在这里插入图片描述

overflow 无效是因为 el-tree 宽度 也是 100px 本来也就没有溢出
在这里插入图片描述

给 el-tree 添加样式 width: fit-content; min-width: -webkit-fill-available; 后，出现滚动条
在这里插入图片描述

Fighting_p
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ElementUI tree超出显示省略号
阿狸演绎的博客
03-16 6302
最近做项目的时候,遇到两个问题 问题: 使用elementUITree时,如果有字段超出,并且后面带有图标的时候,即使使用了cacl动态计算宽度,超出的宽度还是会比其他的多处2px,造成页面无法对其的情况 如果字段超出,则隐藏起来,展示省略号,但是如果有省略了,字段就无法展示全了,鼠标悬浮应该展示 最终效果图 解决方法: 将树的图标用div包起来,属性设置为position: absolute; right: 0px;, 超出展示省略号,鼠标悬浮会展示提示框 2.1先设置一个宽度,超出展示省略号,
在element-ui的el-tree组件中用render函数生成el-button的实例代码
10-17
主要介绍了在element-ui的el-tree组件中用render函数生成el-button 的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
el-element el-tree超出宽度显示横向滚动条问题(已解决)
mia0303的博客
02-20 4860
el-element el-tree超出宽度显示横向滚动条问题-已解决页面画完之后发现el-tree的宽不够了,导致文本超出,本来打算css换行处理,后看到官方的issues里有解决方案, 显示横向滚动条没加之前的样式加过之后的样式解决方法 在css里加上这样一段如果没有生效的话就在el-tree外面加个class为**的盒子 页面画完之后发现el-tree的宽不够了,导致文本超出,本来打算css换行处理,后看到官方的issues里有解决方案, 显示横向滚动条 参考链接 https://github.co
el-tree组件中当节点内容超过长度显示横向滚动条的问题
linhuchong_blog的专栏
12-23 2346
参考 el-tree显示横向滚条的问题 问题描述 最近的项目使用Element-UI作为前端UI框架时，借助el-tree组件实现树形菜单时，父容器规定了宽高，设置overflow:auto,但是当节点显示的文本超过定义的长度时，横向滚动条并未显示； 解决方案 出现该问题的原因是el-tree组件中class名为el-tree-node的div是块级元素，需要把它变为inline-block，,所以覆盖element的样式： .el-tree { width: 100%; ove.
el-tree-v2虚拟滚动树，实现代码勾选、动态禁用勾选、检索、节点文字label宽度超出滚动等功能
最新发布
nlhhln的博客
04-28 1100
某个需求要展示大量树节点，原本使用普通el-tree，默认不要展开太多层次（注意树节点默认全部展开页面渲染很卡），勉强能应付，但是检索功能会展开所有节点，还是很卡顿，只能硬着头皮改版，就想到了用element-plus的虚拟滚动树。查了网上没有多少el-tree-v2的使用文章，下面是自己的踩坑过程，给有需要的人提供些帮助。
Element 组件库，Tree 树型控件，子节点超出时不会左右滚动
Skybububu的博客
12-28 550
Element 组件库，Tree 树型控件，子节点超出时不会左右滚动
element的el-tree组件文字超出容器不出现横向滚动条问题
若晨工作室
01-17 9622
       最近项目中遇到一个多级的树形结构，使用el-tree组件后，父容器规定了宽高，设置overflow:auto,但是超出后横向滚动条并没有出现。       查询原因是el-tree组件中class名为el-tree-node的div是块级元素，需要把它变为inline-block，同时注意每一个节点占一行。所以覆盖element的样式： .el-tree>.el-tr...
element-ui中使用el-tree横向滚动条不显示
ingenuou_的博客
12-08 2358
element-ui中使用el-tree横向滚动条不显示
elementUI - tree 添加横向滚动条
voice
10-27 2234
亲试这个确实能支持横向滚动，但是在我自己项目中却不生效，我也不知道啥情况。后面根据这样的css把设置在 .el-tree-node的样式往上层提升到 .el-tree样式中才可以。 而 .el-tree-node则不再需要自己写样式。 .tree{ overflow-y: hidden; overflow-x: scroll; width:80px; height: 500px; } .el-tree { min-width: 100%; .
el-tree节点溢出隐藏显示不完整以及底部滚动条不显示解决办法
qq_59224836的博客
07-09 2241
一般情况下，el-scrollbar包裹住el-tree会出现tree中的节点显示不完整以及下方滚动条显示不全的问题，只需要把以下代码添加进即可。
el-tree设置横向滚动条
song_song0927的博客
01-10 986
el-tree自定义样式,添加横向滚动条
elementUI中el-tree横向滚动条问题
qq_40087327的博客
09-09 1471
问题描述 项目使用Element-UI作为前端UI框架时，借助el-tree组件实现树形菜单时，存在父子关系，滚动条根据父级长度显示； 解决方案 出现该问题的原因是el-tree组件中class名为el-tree-node的div是块级元素，需要把它变为inline-block，,所以覆盖element的样式： 代码 .el-tree { width: 100%; overflow: scroll; } .el-tree>.el-tree-node { display: inline-b
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-tree溢出部分以省略号显示，鼠标悬停显示出全部
weixin_46972395的博客
05-10 2679
table的show-overflow-tooltip无法在tree上使用，经发现，简单的样式设置即可达到效果 <span slot-scope="{ node, data }" class="custom-tree-node showname" :title="node.label" v-text="node.label"> </span> .showname{ width: 63px; // 定宽 overflow: hidden !important;//
element 中树形控件滚动条问题
m0_66333906的博客
05-23 2913
在使用element ui中树形控件时，当页面缩小的时，树形控件没有竖向滚动条，而且横向滚动条相比来说样式会有点难看，需要调整一下。 <div class="scrollClass"> <el-scrollbar style="height:100%"> <el-tree ref="treeRef" node-key="id" class="video-tree" :data="data"
记一次vue+elementui树状图横向竖向滚动条
qq_37259691的博客
07-03 1991
上图为效果图 <template> <div class="scrollClass"> <el-scrollbar style="height:610px; width: 240px;"> <el-tree class="filter-tree" :data="officeTreeData" :props="{ value: 'id', /.
解决element-plus树形横向,竖向滚动进度条
qq_46468347的博客
08-22 874
【代码】解决element-plus树形横向,竖向滚动进度条。
elementUI树状图竖向滚动条和横向滚动条问题
热门推荐
一纸奇文的博客
08-07 3万+
在使用vue时，就会有使用到elementUI，之后就是不断的在入坑和天坑之间徘徊。 elementUI中有个隐藏的组件，就是滚动条-----&lt;el-scrollbar&gt;&lt;/el-scrollbar&gt; 可以参考elementUI的官网代码 这里用F12可以查看到 添加之后会有出现横向滚动的样式（很丑） 这里需要添加一个样式  .el-scrollbar .el-...
element-ui el-tree
08-09
Element UI的el-tree是一个用于显示树状数据的组件。关于el-tree的样式，可以在代码中添加一些自定义的样式来改变树的显示效果。在引用中的样式示例中，通过添加样式对树的节点、竖线、横线等进行了调整和美化。 在使用el-tree时，可以通过添加node-key属性给每个树节点指定一个唯一的标识符，以实现树节点的查找、选中等操作。这个属性可以通过在代码中添加node-key="id"来指定。可以参考引用中的示例代码。 要在项目中引入Element UI的样式和组件，需要在主文件（主要是main.js）中添加相应的引入语句。如引用所示，需要先引入Element UI的样式文件，然后通过Vue.use(ElementUI)来注册Element UI的组件。 总结起来，如果要使用element-ui el-tree组件，需要在代码中添加el-tree标签，并设置相应的属性，如node-key属性。同时，在样式方面，可以根据需求在代码中添加自定义的样式来美化el-tree的显示效果。要使用Element UI的样式和组件，需要在项目的主文件中引入Element UI，并注册相应的组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值