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

更新时间：2022年09月05日 09:47:32 作者：Hello_yihao

这篇文章主要介绍了关于element-ui select 下拉框位置错乱问题解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

element-ui select 下拉框位置错乱

~~今天写bug时~~ ，突然发现个element下拉框的样式出现错乱，折腾了大半个小时总算搞定了，这里分享下。

先上错乱图

看上图，正常情况下下拉选项应该贴着select框的，而此时两者相隔甚远

这个时候只能检查下元素了

检查元素可以看到，el-select默认插入到body中的，现在出现这个bug后我们就不能再插入到body中了

官网有个属性可以设置成不插入到body中，先在代码中用起来

官网链接：element的select组件

那这个时候还不能完全解决问题，我们需要重置下select的默认样式

在我们的style标签中写

只修改了两处地方就解决了这个bug，总体来说应该还是页面布局有点问题，但这个祖传代码已经不允许我大刀阔斧了。。。

element-ui使用时的一些坑点总结

1.el-select 下拉框绑定值为对象时选中值显示错乱

如下图，所有下拉选项都是选中状态而且不管怎么选，下拉框显示的值一直是最后一个选项

解决办法：加上value-key属性 官网也有介绍，当绑定值是对象类型是必填

代码如下，其中value-key属性的值为数据源数组元素中的唯一键。

例如下面的id，如果其他字段的值也是唯一确定的，如reserve1，那么value-key的值也可以是reserve1

<el-select v-model="goodsForm.currency" value-key="id" placeholder="请选择"
                               @change="changeCurrencySymbol">
                        <el-option
                                v-for="item in currencyList"
                                :key="item.id"
                                :label="item.reserve1"
                                :value="item">
                        </el-option>
                    </el-select>

2.局部覆盖element-ui的默认样式

解决办法：在需要更改的组件里新增一个style标签【重点：不要加scoped】，然后直接获取class设置样式就可以，记住给class加上能限制范围的父层选择器，不然设置的样式会全局生效

3.el-form 标签绑定data中的form时候

请使用:model=“form” 而不是v-model=“form”，不然表单校验会不起作用

原因就是el-form的具有自己封装的model属性，表示表单数据对象

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

浅谈Vue.js之初始化el以及数据的绑定说明
今天小编就为大家分享一篇浅谈Vue.js之初始化el以及数据的绑定说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue全局自适应大小:使用postcss-pxtorem方式
本文介绍了如何在Vue项目中使用postcss-pxtorem插件实现响应式设计,postcss-pxtorem可以自动将CSS文件中的px单位转换为rem单位,从而实现更好的自适应布局,通过配置postcss-pxtorem插件,可以在构建时自动完成转换,无需手动修改代码
2025-01-01
vue elementUI下拉框值无法选中问题及解决方案
大家在写系统的时候,会有这样的需求：点击修改后把需要修改的数据放入表单,其中会有下拉单选框、下拉多选框,展示下拉框单选框内的数据只需要将所选id赋值给下拉框绑定的值就可以了,下面给大家分享vue elementUI下拉框值无法选中问题,感兴趣的朋友一起看看吧
2024-03-03
组件中多个el-upload存在导致上传图片失效的问题及解决
这篇文章主要介绍了组件中多个el-upload存在导致上传图片失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue+Element ui实现树形控件右键菜单
这篇文章主要为大家详细介绍了Vue+Element ui实现树形控件右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
Vue实现购物小球抛物线的方法实例
这篇文章主要给大家介绍了Vue实现购物小球抛物线的方法实例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
vue3 父子组件间相互传值方式
这篇文章主要介绍了vue3 父子组件间相互传值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue.js初学入门教程（1）
这篇文章主要为大家详细介绍了vue.js初学入门教程,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
vue中cookies的使用方式
这篇文章主要介绍了vue中cookies的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue 指令之气泡提示效果的实现代码
这篇文章主要介绍了vue 指令之气泡提示效果的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-10-10