关于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 hash模式微信分享#号的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
防抖节流就是使用定时器 来实现我们的目的。这篇文章通过实例代码给大家介绍vue防抖与节流的使用，感兴趣的朋友跟随小编一起看看吧2019-11-11
vue3的setup语法如何自定义v-model为公用hooks
这篇文章主要介绍了vue3的setup语法如何自定义v-model为公用hooks，文章分为两个部分介绍，简单介绍vue3的setup语法如何自定义v-model和如何提取v-model语法作为一个公用hooks2022-07-07
这篇文章主要介绍了Vue 列表过滤与排序的实现，文章围绕主题展开详细的内容介绍，具有一定的参考价值需要的小伙伴可以参考一下2022-05-05
vue2和vue3中provide/inject的基本用法示例
Vue中的provide/inject是一种组件间通信的方式,它允许父组件向子组件传递数据,而不需要通过props或事件来实现,下面这篇文章主要给大家介绍了关于vue2/vue3中provide/inject的基本用法的相关资料,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了vue页面跳转实现页面缓存操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
总的来说这并不是一道难题，那为什么要拿出这道题介绍？拿出这道题真正想要传达的是解题的思路，以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路，Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架，主要作用就是实现AJAX异步通信2023-02-02
Vue中的watch是什么以及watch和computed的区别
这篇文章主要介绍了Vue中的watch是什么以及watch和computed的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue动态路由缓存不相互影响的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了Vue验证码60秒倒计时功能简单实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
最新评论