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

目录
  • element-ui select 下拉框位置错乱
  • element-ui使用时的一些坑点总结
    • 1.el-select 下拉框绑定值为对象时选中值显示错乱
    • 2.局部覆盖element-ui的默认样式
    • 3.el-form 标签绑定data中的form时候

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属性，表示表单数据对象

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

赞 (0)

相关推荐

  • 解决element-ui的下拉框有值却无法选中的情况

    问题描述: 在使用Vue框架和element-ui开发时,下拉框遇见一个问题,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值,也就是下拉框值无法选中.(踩坑踩得莫名其妙) 代码段: <el-select v-model="value" placeholder="请选择" @change="change()"> <el-option v-for="item in options&

  • 解决element ui select下拉框不回显数据问题的解决

    最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git 前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶 在项目中用到 el-select 时遇到一个问题,就是在编辑表单时,下拉框的不显示数据,前台代码如下: <el-select v-model=&quo

  • 解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除. 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持. 解决思路(从el-select 的角度来考虑,其他组件组合的情况暂不考虑) 想要实现某些选项是不删除,1.需要tag 不可删除,2.options 不可选择 options 不可选择很好实现,只需要给一个disabled属性.tag 不可删除才是关键.下面是我

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

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

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

    目录 element-ui select 下拉框位置错乱 element-ui使用时的一些坑点总结 1.el-select 下拉框绑定值为对象时选中值显示错乱 2.局部覆盖element-ui的默认样式 3.el-form 标签绑定data中的form时候 element-ui select 下拉框位置错乱 今天写bug时 ,突然发现个element下拉框的样式出现错乱,折腾了大半个小时总算搞定了,这里分享下. 先上错乱图 看上图,正常情况下下拉选项应该贴着select框的,而此时两者相隔甚远

  • vue.js select下拉框绑定和取值方法

    最近在做mui+vue.js的移动项目,遇到了这个解决了,所以记录一下: 1.绑定select下拉框的代码很简单sendlist就是下拉框的集合,这个可以去看vue.js的文档: 地址:https://cn.vuejs.org/v2/api/ :value绑定的值就是这个下拉框对应的value值 <select id="sendSybol" v-model="searchDto.sendSymbolId"> <option v-for="

  • vue+Element中table表格实现可编辑（select下拉框）

    最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框:并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同:有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下: HTML代码: 1.在处理人列加入一个下拉框模板,其中v-model必须要scope.row.proJbruserValue来绑定,意思是这个值绑定到当

  • js实现可输入可选择的select下拉框

    js实现可输入可选择的select下拉框

    本文实例为大家分享了可输入可选择的select下拉框,供大家参考,具体内容如下 1.原理: 1.1将input输入框和select框合并在一起,但是显示出向下点击的按钮: 这种比较容易做到 1.2出现输入值能够自动匹配的功能 动态的加载一个临时的div出现在该input下方,当点击页面中的空白地方,div隐藏. 1.3代码: <!doctype html> <html lang="en"> <head> <meta charset="

  • jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text(); 2.jquery获取当前选中select的value值 var checkValue=$("#slc1").val(); 3.jquery获取当前选中select的索引值 var index=$("#slc1 ").get(0).selectedIndex; 4

  • jQuery Select下拉框操作小结(推荐)

    jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_

  • 在element-ui的select下拉框加上滚动加载

    在项目中,我们需要运用到很多来自后端返回的数据.有时是上百条,有时甚至上千条.如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此. 自然,后端就做了一项非常"漂亮"的交互体验数据--分页 这不分页还好,一分页对超过10条数据之后的本来也不多,就20条,偏偏还得做个分页器.(假设为10条) 此时,如果能够像购物商城那样拖拽到底部自动加载新数据就好了. 于是<在element-ui的select下拉框加上滚动加载>诞生了. 这里

  • antd的select下拉框因为数据量太大造成卡顿的解决方式

    相信用过antd的同学基本都用过select下拉框了,这个组件数据量少的时候很好用,但是当数据量大的时候,比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了,卡的我怀疑人生,一点用户体验都没有了. 当然这不是我想去优化它的动力,主要是公司业务人员和后端的同事也无法忍受,于是我只能屈从于他们的淫威.... 想要优化肯定要知道为什么会卡,初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿,于是想要不卡只能限制渲染的数据数量. 我的想法是这样的:任何时候都只渲染前100条数据以保证

随机推荐