element-ui select 下拉框位置错乱问题解决

最新推荐文章于 2023-12-18 11:34:57 发布
最新推荐文章于 2023-12-18 11:34:57 发布
阅读量1.4w 收藏 30
点赞数 16
分类专栏： 学习笔记 文章标签： javascript html css vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hello_yihao/article/details/104557895
版权

今天写bug时 ，突然发现个element下拉框的样式出现错乱，折腾了大半个小时总算搞定了，这里分享下。
先上错乱图
错乱
看上图，正常情况下下拉选项应该贴着select框的，而此时两者相隔甚远
这个时候只能检查下元素了
在这里插入图片描述
检查元素可以看到，el-select默认插入到body中的，现在出现这个bug后我们就不能再插入到body中了
官网有个属性可以设置成不插入到body中，先在代码中用起来
官网链接：element的select组件
在这里插入图片描述
那这个时候还不能完全解决问题，我们需要重置下select的默认样式
在我们的style标签中写
在这里插入图片描述
只修改了两处地方就解决了这个bug，总体来说应该还是页面布局有点问题，但这个祖传代码已经不允许我大刀阔斧了。。。

Hello_yihao
关注
  • 16
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
Vue中ElementUI结合transform使用时，修复el-select弹框定位不准确问题
觉醒法师的专栏
01-15 999
在大屏开发中，比如将1920*1080放到更大像素（3500*2400）大屏上演示，此时需要使用到transform来对页面进行缩放，但是此时发现弹框定位出错问题，无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的组件修复定位问题，经过网友不断发现和提问，原来不同组件解决方案是不同的，这讲解下 组件如何修复。接下来我们讲下select组件的popper弹框错位问题。
解决element-ui的下拉框有值却无法选中的情况
01-18
问题描述： 在使用Vue框架和element-ui开发时，下拉框遇见一个问题，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值，也就是下拉框值无法选中。（踩坑踩得莫名其妙） 代码段： <el v-model=value placeholder=请选择 change=change()> <el v-for=item key=item.value label=item.label value=item.value></el> </el>
[vue]el-select下拉框偏移（不贴合）问题
最新发布
wei3329的博客
12-18 679
通过设置css样式解决el-select下拉框不贴合
el-select下拉框出现了偏移
逆风优雅的博客
04-14 1920
原因是：下拉框的定位是根据body进行了定位，所以位置没有正对着下拉的位置 解决方法是： :popper-append-to-body="false" 将根基body定位设置为false即可。 如下图：
在el-dailog里面使用el-select和el-date-picker位置错乱问题
Ch_2018的博客
12-13 658
2、在el-select里面添加:append-to-body="false"属性,如果不添加的话,我们查看元素会发现下拉框所在的div和el-select是不同级的,是在最外面,添加以后就可以在el-select的子级元素中看到了。2、在el-date-picker标签添加一个class， popper-class="time-date-picker"解决：1、同上类似 给el-date-picker标签添加属性:append-to-body="false"二、el-date-picker相关。
el-select多个选择框位置错位、偏移
MISS_zhang_0110的博客
07-25 1970
在el-select组件中，可能会由于option选项过多而导致下拉框位置错乱、偏移的情况，我个人试验大概是在5-6个option以上时，该bug就会出现。
【elementUI】el-select选择框位置错位、偏移bug
小安驾到的博客
02-16 5270
在el-select组件中，可能会由于option选项过多而导致下拉框位置错乱、偏移的情况，我个人试验大概是在5-6个option以上时，该bug就会出现。
el-select下拉框错位问题记录
hehehe_h的博客
10-24 927
问题记录
el-select下拉框位置错乱(在el-dialog中使用)
song_song0927的博客
05-09 1296
在el-dialog中使用el-select,el-select的下拉框位置不对
解决element组件位置偏移 , 包含 下拉框、 级联选择器、 popover组件、时间选择器
疑问 搜索 动手 解决 记录
06-17 1万+
一 Select组件下拉位置错乱 在select标签里写 二 Popover组件位置偏移 如果el-popover里面的数据是动态的，有时候会出现位置偏移不在可视区域范围内的情况，主要是popper-options这个参数要设置，还请大家看看popper.js的文档 <el-popover ref="dcPopover" placement="left" width="797" trigger="hover" :popper-options="{ boundariesEleme
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在element-ui的select下拉框加上滚动加载
10-17
主要介绍了在element-ui的select下拉框加上滚动加载，本文以以element-ui中的select为例，给大家介绍的非常详细,需要的朋友可以参考下
element select 下拉菜单 定位出错解决方案
CooolYvonne的博客
10-19 5665
框架：Vue+Element 问题： 当点击select，弹出popper后，再滚动外层容器区域，popper的scroll监听会不停的变动popper的位置。这是正常现象。 但是，由于我们的DOM结构嵌套太多，布局太复杂。出现了一个特别的现象： popper没有正常的跟随select的位置变化定位。 如果发生这种情况，比较好处理的是直接可以加一下select 的 popper-append-to-body 属性 并设置为false值（whether to append the popper menu t
调整 el-select 高度之后 箭头错位问题解决
localhost
04-01 900
在调整 el-select 或者 input 高度，比如成功之后，el-select箭头错位，情况类似如下图。
element中el-select下拉框位置错乱问题
snowball的博客
04-13 2702
element中el-select下拉框位置错乱问题 - demo-x - 博客园
el-select使用了多选时，选中多个会撑开原始高度，样式错乱，使用tag展示，一行显示全部内容，超过显示长度并以...显示的方法
qq_42780155的博客
06-03 2万+
使用el-select的多选下拉选择时，如果默认的选择会撑开input，显示所选的全部内容； 这样子很难看，样式还不整齐。 文档中有tag的形式展现，设置collapse-tags属性将它们合并为一段文字： 就不会出现上述的情况了。 但是当多选的内容多长的时候，后面还是会撑开换行，照样使样式不整齐： 看了上面的element元素发现： 这时候需要加内容一行显示，内容超出隐藏，溢出时显示省略标记…的写法了！ css基本功大显身手的时候到啦！（记不起来或者不会的小伙伴记得百度哈…） word-break
Element 弹窗内日期、下拉框控件 样式乱掉错位问题
qq_29050279的博客
04-23 3965
一、select多选框定位 el-select控件生成的下拉框标签默认位置是在body中，也是相对body定位的，而不是针对当前元素 可能出现这种情况： 解决方案：把popper-append-to-body属性设为false，生成下拉框到当前元素位置 <el-select v-model="value" :popper-append-to-body="false" popp...
Vue使用ElementUi表单多级级联时引发的表单错乱问题，闹心的Bug哪都有，这个最烦人
04-12 1609
其实这个问题出现的场景还是挺费心思的，因为业务需要，我们有一个多级表单的场景，而且某个表单可能会级联另一个表单域的出现或隐藏，而且我还使用了v-if判断....这就是最糟心的地方，大部分是因为v-if引起的表单错乱........我们的表单域样式：表单域代码：下面是基本上修好了，将v-if替换为v-show就好了大部分了： 出现问题的样式：当我选择OPRF的时候，就会出现级联关系，并且触发表单校验，这是有问题的时候样式，代码我就不贴了： 1.当使用过级联关系后的表单，点击取消之后，再次单击创建任务，表单
vscode快捷键重置及快捷键恢复
热门推荐
Hello_yihao的博客
11-28 3万+
在用vscode设置快捷键的时候，有的快捷键和自己设置的有重复和冲突现象，为了图方便我把与自己冲突的快捷键都删除了，结果导致键盘的删除按键用不了，相当于自己写的代码无法删除了。最后还是在官网上找到解决办法。 首先找到键盘快捷设置 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191128152918849.png) ![在这里插入图片描述](http...
vue + element-ui的下拉框el-select获取额外参数
09-05
在Vue中使用Element-UI的下拉框（el-select）组件时，想要获取额外的参数可以通过以下步骤实现： 1. 在下拉框的选项列表（el-select标签、el-option标签）中，可以通过使用自定义属性来保存额外的参数。例如，可以为每个选项设置一个名为"data"的自定义属性来存储额外参数的值。 示例代码： ```html <el-select v-model="selectedValue"> <el-option v-for="item in options" :key="item.value" :data="item.data" :label="item.label" :value="item.value"></el-option> </el-select> ``` 2. 在Vue组件中，可以使用`@change`事件来监听下拉框的选择变化。在事件处理方法中，可以通过`event.target.querySelector('.el-select-dropdown .el-dropdown-menu__item.hover')`来获取当前选中的选项元素。 示例代码： ```javascript methods: { handleSelectChange(event) { const selectedItem = event.target.querySelector('.el-select-dropdown .el-dropdown-menu__item.hover'); const extraParam = selectedItem.getAttribute('data'); // 处理获取到的额外参数 } } ``` 以上就是获取额外参数的简单方法，可以根据实际需求对其中的代码进行扩展和优化。通过这种方式，我们可以在Vue中使用Element-UI的下拉框组件，并且能够获取到额外的参数值以满足业务需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值