el-select下拉框的问题

最新推荐文章于 2024-07-24 14:36:39 发布
最新推荐文章于 2024-07-24 14:36:39 发布
阅读量677 收藏 1
点赞数
分类专栏： bug vue 文章标签： html css vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38783557/article/details/120293511
版权
vue 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
bug
3 篇文章 0 订阅
订阅专栏

解决下拉框位置不对的bug

问题1

el-select出现的位置跟下拉的位置隔很远

解决办法

在el-select上添加:popper-append-to-body='false'，完美解决

问题2

el-select已经在最底下了，下拉框还是出现在下方

解决办法

算出下拉框高度，top取它的负值

//假定下拉框内的内容高度为100px
.el-select-dropdown{
	left: 0!important;
	top: -100px!important;
}

上方同理

九州白
关注
专栏目录
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
el-select 下拉框多选实现全选的实现
10-16
文章《el-select 下拉框多选实现全选的实现》介绍了两种实现el-select下拉框全选的方法。 第一种方法是直接在下拉列表中添加一个“全选”选项。该选项是el-option组件，具有特殊的label值“全选”。当用户点击这个...
el-select下拉框位置错乱(在el-dialog中使用)
song_song0927的博客
05-09 1643
在el-dialog中使用el-select,el-select的下拉框位置不对
自定义指令实现el-select下拉菜单无限滚动
最新发布
qq_53343891的博客
07-24 597
当我们在工作中需要使用到下拉菜单来使用数据，不管是有没有开启远程搜索，在面对数据量特别大的时候又正好遇到需要开启无限滚动的需求，而原生的elementplus组件库中的el-select又没有一个api可以满足这个需要，那么我们除了自己去封装一个下拉菜单，此时就可以在全局封装一个自定义指令来解决这个问题。
修改el-select下拉框位置
weixin_45832746的博客
11-10 1000
【代码】修改el-select下拉框位置。
el-select下拉框错位问题记录
hehehe_h的博客
10-24 1034
问题记录
element-plus修改el-select下拉框的位置
qq_43651168的博客
05-16 4294
element-plus修改el-select下拉框位置
element中el-select下拉框位置错乱问题
snowball的博客
04-13 3320
element中el-select下拉框位置错乱问题 - demo-x - 博客园
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
总之，Vue中的`el-form` 和`el-select` 提供了强大的表单组件功能，通过自定义`el-select` 的下拉框标签，我们可以灵活地构建符合业务需求的表单。在项目开发过程中，深入理解并熟练运用这些组件，能够显著提高开发...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
处理 el-select 下拉列表产生位置不准确，打开下拉列表后滚动页面列表会异常偏移的问题
m0_52211521的博客
07-22 869
我就对比了一下element-ui官网针对vue2/vue3的el-select参数描述发现，针对vue3实行的下拉框参数中并不沿用popper-append-to-body字段来控制是否将组件加入body，而是用teleported控制，于是尝试加了:teleported="false"，结果发现成功了。结论：在el-select标签内加入:popper-append-to-body="false"或者:teleported="false"即可解决。
解决element UI中 select下拉框 el-select-dropdown el-popper超出el-dialog弹框的问题
shadow__jing的博客
07-26 3977
【问题】： 在elementUI 中，el-dialog的内容比较多，出现滚动条，且内容包含input输入框、select下拉框、时间选择器、cascader级联选择器等，在点开select下拉选择框后并向下滚动鼠标，会出现下拉框跑出el-dialog的区域的情况（有可能离el-dialog的区域很远），造成页面的展示效果混乱。【解决方案】：我们可以在鼠标滚动的时候，让select弹框隐藏，这样就可以解决select 下拉框在el-dialog外面的问题了。在自己封装的el-dialog的组件里。
element-ui 的el-select展开位置
peer__的博客
11-15 2203
el-select位置偏移 el-select下拉框朝上展开
隐藏饿了么el-select组件的el-select-dropdown部分,只使用el-select的显示框
李十三的博客
02-22 995
隐藏el-select-dropdown,于是el-select-dropdown部分就没有插入了最外层body而是和el-select组件中的input也就是显示已选值的框并列。.el-select-dropdown 就成功隐藏了!
Element UI el-select下拉框修改el-select-dropdown__wrap样式
qq_42502673的博客
03-02 1950
el-select下拉框修改el-select-dropdown__wrap样式
element el-select下拉框修改样式 el-select-dropdown
热门推荐
qq_41287158的博客
10-29 1万+
element el-select下拉框修改样式 el-select-dropdown 修改下拉框的样式 想要修改el-select的样式 尝试修改css无效果，于是打开控制台发现如图所示，它们是同级的。 于是，又去仔细翻阅了element文档 发现 有一个popper-class属性 实践，如图所示 注意：style中需要去掉 scoped！！！ 否则无效 ...
el-form中el-select-dropdown样式不生效的问题
han_xiao_xiao的博客
05-06 432
【代码】el-form中el-select-dropdown样式不生效的问题。
修改el-select组件 el-select-dropdown__wrap样式不生效问题及解决
qq_42908317的博客
12-24 3853
修改el-select组件 el-select-dropdown__wrap样式不生效问题及解决 最近项目中用到了树结构的下拉框 写好以后发现 el-select-dropdown__wrap 哪怕使用深度选择器也修改不了，经过查找各种资料 最后发现渲染后的dom元素就不在#app元素内部 知道问题以后就好解决了 el-select 上加上 :popper-append-to-body=“false” 属性用于将渲染后的元素放入#app元素 这时候在使用深度选择器就可以了 ...
【elementUI】el-select选择框位置错位、偏移bug
小安驾到的博客
02-16 5942
在el-select组件中，可能会由于option选项过多而导致下拉框位置错乱、偏移的情况，我个人试验大概是在5-6个option以上时，该bug就会出现。
修改 el-select 下拉框样式
07-17
要修改 el-select 下拉框的样式，可以通过修改其属性值或者添加 CSS 样式来实现。具体方法如下： 1. 修改 popper-append-to-body 属性值为 false，这样可以将弹出框插入到 el-select 所在的 DOM 元素中，而不是插入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值