关于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中实现antd的动态主题的代码示例
在需求开发阶段,鉴于项目采用了antd作为基础组件库,确保组件外观与antd一致变得尤为重要,这包括颜色、字体大小及尺寸等样式的统一,然而,截至当前antd-vue尚未实现这一便捷的CSS变量特性,但理解其背后的实现机制后,我们可以自行构建这一功能,需要的朋友可以参考下
2024-07-07
Vue3.0写自定义指令的简单步骤记录
Vue中除了内置指令,也允许注册自定义的指令,下面这篇文章主要给大家介绍了关于Vue3.0写自定义指令的相关资料,需要的朋友可以参考下
2021-06-06
使用Vue Router进行路由组件传参的实现方式
Vue Router 为 Vue.js 应用提供了完整的路由解决方案,其中包括了组件间的数据传递功能,通过路由组件传参,我们可以轻松地在导航到新页面时传递必要的数据,本文将深入探讨如何使用 Vue Router 进行路由组件间的传参,并通过多个示例来展示其实现方式
2024-09-09
Vue多系统切换实现方案
本篇文章给大家分享了关于Vue多系统切换实现的解决方案，对此有需要的朋友可以跟着参考学习下。
2018-06-06
vue引入组件的几种方法代码示例
vue的一个强大功能就是组件化开发,下面这篇文章主要给大家介绍了关于vue引入组件的几种方法,文中给出了详细的代码及图文介绍,需要的朋友可以参考下
2024-04-04
Vue3 Element-plus el-menu无限级菜单组件封装过程
对于element中提供给我们的el-menu组件最多可以实现三层嵌套，如果多一层数据只能自己通过变量去加一层，如果加了两层、三层这种往往是行不通的，所以只能进行封装，这篇文章主要介绍了Vue3 Element-plus el-menu无限级菜单组件封装,需要的朋友可以参考下
2023-04-04
vue 中命名视图的用法实例详解
这篇文章主要介绍了vue 中命名视图的用法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-08-08
Vue3实现地图选点组件的示例代码
这篇文章主要为大家详细介绍了Vue3实现地图选点组件的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
vue项目两种方式实现竖向表格的思路分析
这篇文章主要介绍了vue项目两种方式实现竖向表格的思路分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
vue keep-alive中的生命周期解读
这篇文章主要介绍了vue keep-alive中的生命周期,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10