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

最新推荐文章于 2024-06-19 20:53:45 发布
最新推荐文章于 2024-06-19 20:53:45 发布
阅读量485 收藏 7
点赞数 7
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xu568110526/article/details/135729364
版权
本文介绍了在Vue开发中，如何使用ElementUI库中的`.dir-tree`类和`.el-tree`组件实现一个高度可定制的目录树视图，以及相关的CSS样式设置。
摘要由CSDN通过智能技术生成 
<el-card class="dir-tree">
     <el-tree />
</el-card>



.dir-tree {
  width: 100%;
  height: 100%;
  overflow: auto;

  .el-tree {
    display: inline-block;
    min-width: 100%;
  }
}

小桥流水人家丶
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-tree-selected-tree
11-15
在element-ui中的el-tree上实现单独拉出一棵树来显示树的选中节点，同时可以在该树上删除已选中节点
elementUI中el-tree横向滚动条问题
qq_40087327的博客
09-09 1467
问题描述 项目使用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
elementui el-tree横向滚动
lml_little的博客
07-22 799
flex布局横向滚动条
elementPlus el-tree-v2横向滚动问题
qq_52933936的博客
12-13 590
father{important;
vue项目中el-tree ：横向和纵向滚动条设置
coinisi_li的博客
08-09 5185
①纵向滚动条容易设置，只需要在el-tree组件中设置height即可。②横向滚动条稍微复杂，如下代码（或者通过js计算）
el-tree设置横向滚动条
song_song0927的博客
01-10 916
el-tree自定义样式,添加横向滚动条
element 树组件 tree 横向纵向滚动条
xiaoququ的博客
06-13 572
【代码】element 树组件 tree 横向纵向滚动条。
element tree 横向滚动条问题
吹口哨的兔子
03-19 1116
.el-tree { width: 100%; overflow: scroll; } .el-tree>.el-tree-node { display: inline-block; min-width: 100%; }
解决element ui tree组件不产生横向滚动条
m0_63466615的博客
12-02 625
在css里面这样写,样式穿透按自己使用的css编译器以及框架要求就好。需要在tree的外层，包一个父组件。
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
element的el-table中记录滚动条位置的示例代码
10-16
主要介绍了element的el-table中记录滚动条位置的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
elementUI - tree 添加横向滚动条
voice
10-27 2230
亲试这个确实能支持横向滚动，但是在我自己项目中却不生效，我也不知道啥情况。后面根据这样的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 - tree添加横向滚动条
qq_43765727的博客
11-09 941
原文链接：https://blog.csdn.net/u012138137/article/details/81196257
el-tree怎么设置树节点内容溢出的滚动条
千里之行，始于足下！
10-29 9830
在vue项目中使用elementUI组件的树组件，当树节点的数据过多则需要增加纵向滚动条，如果节点的内容过长则需要设置横向滚动条，那么css中应该怎样实现呢？下面就是一个树节点内容溢出增加横纵向滚动条的实例 1、HTML中 <template> <el-tree :data="data" show-checkbox node-key="id" :de...
element-UI el-tree横向滚动条
零食粉碎机的博客
12-19 3303
添加如下样式 <div class="device-tree"> <el-scrollbar style="height:100%"> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"> </el-tree> ...
elementUI - tree横向滚动问题
热门推荐
菜鸡奋斗ing的博客
07-25 1万+
我想有用elementUI的人，有用到tree组件应该或多或少都有可能碰到tree节点过多需要横向滚动显示吧，但是组件文档上没有~而且百度上也少得可伶。 昨天也碰到这问题，后面在技术群里有人回答，我觉得这种问题应该记录下。 亲试这个确实能支持横向滚动，但是在我自己项目中却不生效，我也不知道啥情况。后面根据这样的css把设置在 .el-tree-node的样式往上层提升到 ....
Vue + SpringBoot 实现文件的断点上传、秒传，存储到Minio
最新发布
m0_73179389的博客
06-19 526
前端页面使用的elment-plus的el-upload组件。当上传文件后，会调用handleChange 方法，可以在这里进行文件相关的操作。计算文件的MD5值。
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_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值