Element-UI Plus 给el-dropdown添加滚动条效果

最新推荐文章于 2023-12-12 11:33:21 发布
最新推荐文章于 2023-12-12 11:33:21 发布
阅读量2.6k 收藏 6
点赞数 6
文章标签： ui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RRRRRRichard/article/details/123209821
版权

Element-UI Plus 给el-dropdown添加滚动条效果

不需要添加el-scrollbar的使用方法!!!

复制一个原生的dropdown组件
https://element-plus.gitee.io/zh-CN/component/dropdown.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      Dropdown List
      <el-icon class="el-icon--right">
        <arrow-down />
最低0.47元/天 解锁文章
junweipanda
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue3-elementplus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色（详细示例代码，解决样式覆盖失败问题）
Lynn
03-27 1672
Vue3 Element Plus 表格组件 table 设置横纵滚动条样式，覆盖修改 el-table 表格固定宽高时滚动条的宽度、高度、颜色等（提供详细示例代码，解决各种样式覆盖失败问题）)
在element-ui的select下拉框加上滚动加载
12-12
在项目中，我们需要运用到很多来自后端返回的数据。...于是《在element-ui的select下拉框加上滚动加载》诞生了。 这里通过自定义封装vue指令进行封装。（什么是指令：官方指令叫v-on,v-model） 以下以element-ui中的sel
Element-UI 给el-dropdown添加滚动条
ddk54321的博客
04-08 9175
Element-UI 官方文档中没有给出下拉菜单（el-dropdown）设置滚动条的方法。 但是又没有试验出为下拉菜单添加el-scrollbar的使用方法。 所以直接修改的自带的滚动条样式。 下拉菜单el-dropdwn的HTML代码： <!-- 未归档项目下拉框 --> <el-dropdown class="project-container" @comm...
el-dropdown-item增加滚动条
m0_69688393的博客
02-09 633
el-dropdown-item增加滚动条
el-dropdown-menu 添加滚动轴
最新发布
qq_41562817的博客
12-12 436
背景：使用el-dropdown下拉菜单时，发现el-dropdown-menu 在设置高度和溢出的情况下仍无法添加滚动轴。方法也可在普通盒子上生效。
【vue】elementui组件el-dropdown在页面滚动后定位问题修正
yanglijuan_81的博客
10-10 469
elementui组件el-dropdown在页面滚动后定位会向上跑偏，在本地运行时没有问题，在打包后会出现这个问题，修正如下：
element-plus 原生滚动条使用
ICY_YES的专栏
07-20 1953
element-plus native scroll table
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-select组件通常用于创建一个可选列表，用户可以从中选择一个或多个选项。当el-select的选项列表（el-...
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
将下拉菜单设为滚动效果
Yan-note
06-08 1236
需要注意的是，滚动条仅在下拉菜单内容超出容器高度时才会显示，如果没有超出高度，滚动条不会显示。此外，在某些浏览器中，滚动条可能不会起作用，这时需要更改滚动条的样式或者使用其他方案来解决问题。以上是将下拉菜单设置成滚动效果的基本步骤。可以根据实际需求调整滚动条的宽度、颜色和边角弧度等样式，实现更加个性化的效果。
关于element-plus的Dropdown 下拉菜单属性的修改
AdorkableSera的博客
01-21 7367
element-plus关于dropdown-menu隐藏的下拉菜单设置
记录：element-plus el-dropdown有黑框，下拉不显示
陈铭杰的博客
11-01 1442
element-plus el-dropdown有黑框，下拉不显示
element-ui中的el-scrollbar,操作滚动条
热门推荐
yiyueqinghui的博客
04-30 1万+
<template> <div id="test" style="height:500px;"> <el-scrollbar style="height:100%" :wrap-class="wrapClass" :wrap-style="wrapStyle" :view-class=...
el-dropdown-menu指令事件的使用方法
m0_62317155的博客
06-07 3421
集合el-table使用，将表格的某一行数据通过点击对应的按钮传入到对应的指令事件中，使@command可以传两个参数，一个是command指令，一个是表格当前行的数据。官网的使用方法：点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。"下拉菜单11111111""下拉菜单22222222""command的数据是：""command的命令是""表格传入的一行数据是""下拉菜单333333""表格传入的行数据是："'路径1111111''路径3333333''路径4444444'
使用 element-ui 隐藏组件 el-scrollbar 美化滚动条
qq_45745643的博客
05-26 3789
嘻嘻，抽空出个教程，这个我也是看别人的文章学来的哈哈 拿element-ui官网的这个container布局容器做例子吧，当我们展开所有条目的时候，右侧就会出现浏览器自带的滚动条，而且这个滚动条还会把左边的上下箭头挤过去…说白了就是会占间距，虽然还看得过去…但是给别人的感觉就很low 然后我们再把鼠标移动到官网左侧的列表栏，就能看到element-ui自带的滚动条啦，很好看吧 那么我们怎样才能用上这个滚动条呢，教程开始！ element-ui是有这个组件的， <el-scrollbar>&l
element-plus修改下拉菜单Dropdown-Item 样式（popper-class）
qq_26596795的博客
01-04 6255
element-plus修改下拉菜单Dropdown-Item 样式（popper-class）
Element Plus 实例详解（五）___Scrollbar 滚动条
逆境清醒的博客
03-26 6380
Element Plus Scrollbar 滚动条，用于替换浏览器原生滚动条。主要内容有：Scrollbar 滚动条基础用法，横向滚动Scrollbar用法，Scrollbar滚动条最大高度与元素高度关系，手动滚动Scrollbar滚动条。1Element Plus 实例详解（一）__安装设置2Element Plus 实例详解（二）___Button 按钮3Element Plus 实例详解（三）___Date Picker 日期选择4Element Plus 实例详解（四）___Border 边框5。
【vue3】使用vuedraggable和grid实现自定义拖拽布局
qq_45406325的博客
11-13 2374
使用vuedraggable实现拖拽功能，拖拽改变的是模块在list的顺序，使用gird设置动态类名，根据模块在list的位置匹配对应的gird样式。
给el-dropdown添加滚动条
04-26
可以通过添加 max-height 和 overflow 属性来为 el-dropdown 添加滚动条。例如： ``` <el-dropdown> <span class="el-dropdown-link">下拉菜单</span> <el-dropdown-menu slot="dropdown" class="scroll-warp"> <div class="scroll-inner"> <el-dropdown-item v-for="item in list" :key="item.id">{{ item.name }}</el-dropdown-item> </div> </el-dropdown-menu> </el-dropdown> <style> .scroll-warp { max-height: 200px; overflow-y: auto; } .scroll-inner { padding-right: 20px; } </style> ``` 其中，scroll-warp 类指定了最大高度和垂直滚动条，scroll-inner 类添加了右侧 padding，以防止出现水平滚动条。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值