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

最新推荐文章于 2024-07-07 22:29:55 发布
最新推荐文章于 2024-07-07 22:29:55 发布
阅读量1.2k 收藏 15
点赞数 6
分类专栏： elementUI css 文章标签： ui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53562074/article/details/136324566
版权
文章探讨了在el-tree组件中设置父容器宽度为100px时，如何防止数据溢出且不显示滚动条。尝试了overflow:auto无效后，通过添加特定CSS样式解决了滚动条问题。
摘要由CSDN通过智能技术生成

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

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

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

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

Fighting_p
关注
  • 6
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2022年最新前端面试题（大前端时代来临卷起来吧小伙子们..持续维护走到哪记到哪）
m0_55613022的博客
02-24 3160
HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文 一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。 怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f
个人技能点(郎)
木木木森林
08-24 1982
个人技能点1. 熟悉 h5 和 c3 新特性：语义化标签，flex 布局，动画等H5 新特性：2. 熟悉js作用域、原型、事件轮询机制、闭包等原理；js 作用域闭包事件轮询机制原型3. 熟悉 ES6 语法标准 promise，async/await 异步方案，箭头函数等`Promise`思路：generatorasync/awaitpromise 和 async/await 的区别箭头函数4. 了解 ajax 前后台数据交互原理，熟练使用原生 ajax 及 ajax 类库，如: axios；并掌握 json
bug记录：el-tree横向文字超出没有滚动
weixin_44160439的博客
10-17 596
项目场景：elementui的树形控件在使用时，横向文字超出没有滚动。
element tree
10-27
用vue+element 制作tree 功能主要有搜索增删改上下移动
element-ui中el-tree的父元素设置好宽度后不能被子内容撑开的问题 el-tree宽度
最新发布
qq_38210427的博客
07-07 237
原因分析： 因为.el-tree-node__content的 display默认的是flex，所以下边的div内容撑不起来，而且.el-tree-node__children的overflow属性是hedden，所以下边的内容一多就自动隐藏了；设置完父级的宽度之后，el-tree将不能被撑开，一旦子树的内容太长就显示不出来了；
vue项目中el-tree ：横向和纵向滚动条设置
coinisi_li的博客
08-09 5761
①纵向滚动条容易设置，只需要在el-tree组件中设置height即可。②横向滚动条稍微复杂，如下代码（或者通过js计算）
el-element el-tree超出宽度显示横向滚动条问题(已解决)
mia0303的博客
02-20 5108
el-element el-tree超出宽度显示横向滚动条问题-已解决页面画完之后发现el-tree的宽不够了,导致文本超出,本来打算css换行处理,后看到官方的issues里有解决方案, 显示横向滚动条没加之前的样式加过之后的样式解决方法 在css里加上这样一段如果没有生效的话就在el-tree外面加个class为**的盒子 页面画完之后发现el-tree的宽不够了,导致文本超出,本来打算css换行处理,后看到官方的issues里有解决方案, 显示横向滚动条 参考链接 https://github.co
el-tree怎么设置树节点内容溢出的滚动条
千里之行，始于足下！
10-29 1万+
在vue项目中使用elementUI组件的树组件，当树节点的数据过多则需要增加纵向滚动条，如果节点的内容过长则需要设置横向滚动条，那么css中应该怎样实现呢？下面就是一个树节点内容溢出增加横纵向滚动条的实例 1、HTML中 <template> <el-tree :data="data" show-checkbox node-key="id" :de...
elementUI - tree 添加横向滚动条
voice
10-27 2294
亲试这个确实能支持横向滚动，但是在我自己项目中却不生效，我也不知道啥情况。后面根据这样的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%; .
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
在Vue.js开发中，ElementUI是一个非常流行的前端组件库，它提供了丰富的UI组件，如Select和Cascader，用于构建用户界面。然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时...
面试总结（1）---7.28
刘群智的博客
07-28 1593
Ajax关于readyState（状态值）和status（状态码）的研究 var getXmlHttpRequest = function () {     try{         //主流浏览器提供了XMLHttpRequest对象         return new XMLHttpRequest();     }catch(e){         //低版本的IE浏览器没有...
前端面试题干货汇总（超详细）
王俊的博客
07-11 3188
前端面试干货汇总，包括HTTP、JS、CSS等
el-tree节点溢出隐藏显示不完整以及底部滚动条不显示解决办法
qq_59224836的博客
07-09 2369
一般情况下，el-scrollbar包裹住el-tree会出现tree中的节点显示不完整以及下方滚动条显示不全的问题，只需要把以下代码添加进即可。
el-tree设置横向滚动条
song_song0927的博客
01-10 1204
el-tree自定义样式,添加横向滚动条
element-ui中使用el-tree横向滚动条不显示
ingenuou_的博客
12-08 2505
element-ui中使用el-tree横向滚动条不显示
element ui tree组件怎么设置滚动条
m0_73323423的博客
04-13 1786
给tree元素添加el-scrollbar 和自定义class类名，并给el-tree的父元素设置overflow:auto。
vue + ElementUI tree组件高度设置，超出一定高度，显示滚动条
热门推荐
weixin_41234837的博客
05-18 1万+
vue + ElementUI tree组件高度设置，超出一定高度，显示滚动条 效果图 代码： <divclass="down-tree"> <el-tree :data="leftTreeData" ref="tree" node-key="id" :props="defaultProps" @node-click="handleNode...
elementUI中el-tree横向滚动条问题
qq_40087327的博客
09-09 1495
问题描述 项目使用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横向滚动条
零食粉碎机的博客
12-19 3357
添加如下样式 <div class="device-tree"> <el-scrollbar style="height:100%"> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"> </el-tree> ...
Vue与Element UI：el-scrollbar自定义滚动实现
本文将详细介绍如何在Vue项目中使用Element UI库中的el-scrollbar组件来实现自定义滚动。 Element UI是基于Vue的组件库，它包含了丰富的UI组件，如表格、按钮、弹窗等。虽然Element官方文档中并未直接提及el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值