【css】修改el-tree默认滚动条样式

最新推荐文章于 2023-10-25 14:50:02 发布
最新推荐文章于 2023-10-25 14:50:02 发布
阅读量980 收藏
点赞数
分类专栏： vue css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32088869/article/details/123571881
版权
vue 同时被 2 个专栏收录
37 篇文章 5 订阅
订阅专栏
css
5 篇文章 0 订阅
订阅专栏 
.common-tree::-webkit-scrollbar {
    width: 4px;
    height: 10px;
}
.common-tree::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.04);
    border-radius: 10px;
}
王佑辉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS 设置滚动条样式的实现
11-21
webkit滚动条样式重置 1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。 2、scrollbar corner为横向和竖向的交叉角区域 3、resize用来设置滚动条的交汇处上用于拖动调整元素大小的小控件 组成结构图如下：   一旦发现滚动条的自定义样式，浏览器的默认样式设置将会失效，只使用在css定义的样式。也就意味值不能单独只设置scrollbar button或scrollbar track。 -webkit-scrollbar /
el-tree-selected-tree
11-15
在Element UI库中，`el-tree` 是一个强大的组件，用于构建可交互的树形结构数据展示。在实际开发中，我们经常需要处理用户选择的节点，并可能需要独立展示这些选中节点，甚至允许用户在独立的树结构中进行删除操作。...
Element-ui之ElScrollBar组件滚动条的使用方法
10-18
主要介绍了Element-ui之ElScrollBar组件滚动条的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
滚动条样式修改
风里有诗句哈的博客
10-22 191
#tab1tree2::-webkit-scrollbar { width: 3px; } #tab1tree2::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); } #ta...
element ui tree组件怎么设置滚动条
m0_73323423的博客
04-13 1729
给tree元素添加el-scrollbar 和自定义class类名，并给el-tree的父元素设置overflow:auto。
vue项目中el-tree ：横向和纵向滚动条设置
coinisi_li的博客
08-09 5540
①纵向滚动条容易设置，只需要在el-tree组件中设置height即可。②横向滚动条稍微复杂，如下代码（或者通过js计算）
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...
vue修改Element的el-table样式的4种方法
10-14
除了上述方法，还可以通过CSS类和深度选择器（如`.el-table__body tr:nth-child(n)`)来全局修改Element UI的el-table样式。但这种方法可能会受到Element UI内部样式的影响，可能需要更高的优先级或者使用`!important...
可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
02-28
在 Vue 中，可以使用 scoped CSS 或者内联样式来覆盖默认样式。例如，如果你想要替换所有节点的图标，可以这样做： ```css /* scoped CSS */ .el-tree-node__content .el-tree-node__expand-icon { background-...
前端项目修改默认滚动条样式(小结)
12-14
总的来说，通过纯CSS修改滚动条样式可以提升用户体验，但需要注意的是，这些样式只在支持Webkit前缀的浏览器中生效。对于其他浏览器，如Firefox，可能需要使用`-moz-`前缀，而IE和Edge等浏览器可能需要使用不同的...
CSS3改变浏览器滚动条样式
11-21
在CSS3中，我们可以通过特定的伪类选择器来改变基于`-webkit-`内核浏览器（如Chrome、Safari）的滚动条样式，以解决滚动条过于宽大或不美观的问题，提升网页的整体视觉效果。以下是关于如何自定义滚动条样式的详细...
el-tree滚动条
洪君的博客
04-23 540
解决el-tree横向滚动条问题 <div class="isTree"> <el-tree></el-tree> </div> <style lang="scss"> .isTree{ width: 100%; height: 100%; over...
el-tree横向、纵向滚动条
编程技术分享，Java后端、Vue前端
09-16 1713
<div class="left_block"> <el-input v-model="filterText" placeholder="输入关键字进行过滤"></el-input> <el-tree class="terminal_tree" ref="s...
vue之elementui，树形组件el-tree实现左右拖动滚动条
沙门空海
07-17 4073
<el-tree class="el-scrollbar" id="fixtree" :data="logTreeList" @node-click="handleNodeClick" @node-contextmenu="showMenu" @node-expand="closeMenu" @no.
el-tree横向纵向滚动条
最新发布
庭前云落的博客
10-25 1485
给容器一个高度，然后样式加上overflow: scroll，这样纵向滚动条就出来了。el-tree未展开时样式。el-tree展开时样式。横向的加上下面的样式。
Vue ElementUI el-scrollbar 嵌套 el-tree 出现横向纵向滚动条
weixin_42322991的博客
04-20 1507
vue页面 <div style="height: 400px"> <el-scrollbar style="height: 100%"> <el-tree ref="tree" :data="list" node-key="id" :props="defaultProps"
el-tree加滚动条的方法
热门推荐
qq_38110274的博客
12-31 1万+
el-tree加滚动条
el-tree添加滚动条只需一步
momo_via的播客
08-04 1086
在el-dialog下的el-tree添加滚动条
el-tree设置滚动条
07-28
要为el-tree设置滚动条，可以根据不同的需求选择不同的方法。根据引用\[1\]，可以通过设置外层父级div的宽高，以及设置el-scrollbar和el-tree的样式来实现纵向滚动条。具体的样式设置如下： ```css .dir-tree { width: 360px; height: 800px; } .el-tree { min-width: 100%; display: inline-block !important; } .el-scrollbar .el-scrollbar__wrap { overflow-x: hidden; } ``` 如果需要横向滚动条，可以参考引用\[2\]的方法。给el-tree添加一个class，例如"flow-tree"，然后在样式中添加如下样式： ```css .flow-tree { width: 100%; overflow: scroll; } .flow-tree > .el-tree-node { display: inline-block; min-width: 100%; } ``` 如果你使用的是el-tree组件的话，可以直接在el-tree标签上添加class，如下所示： ```html <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all show-checkbox :filter-node-method="filterNode" /> ``` 然后在样式中添加如下样式： ```css .filter-tree { overflow: auto; } :deep(.el-tree-node > .el-tree-node__children) { overflow: visible; } ``` 这样就可以为el-tree设置滚动条了。 #### 引用[.reference_title] - *1* [element-ui tree加滚动条](https://blog.csdn.net/hbh112233abc/article/details/118359656)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [el-tree加滚动条的方法](https://blog.csdn.net/qq_38110274/article/details/122251743)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [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_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王佑辉

老板，赏点吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值