element el-select下拉框选择失效解决办法

更新时间：2023年08月23日 09:38:25 作者：爱写代码的派大星

el-select即选择器用于从若干个候选项中选择其中一个(或者多个),在传统网页开发中选择器经常被称作下拉框、下拉列表是最常用的表单元素之一,这篇文章主要给大家介绍了关于element el-select下拉框选择失效解决办法,需要的朋友可以参考下

如图：

当我已经选择启用状态的时候，然后点击停用状态没反应。

原因：

是因为在配置表单的过程中，重复使用了这个字段。

如：

this.form.status = row.data.status

<el-form-item label="状态" prop="status">
   <el-select v-model="form.status">
     <el-option
     :label="label"
     >
     </el-option>     
   </el-select>
</el-form-item>

就是在表单中重复使用了status这个字段，然后导致选择失效。

解决办法：

在el-select加入@change事件，进行强制渲染，这样就可以完成下拉框的选择。

<el-form-item label="状态" prop="status">
   <el-select v-model="form.status" @change="change">
     <el-option
     :label="label"
     >
     </el-option>     
   </el-select>
</el-form-item>

     change(){ 
    //强制渲染
    this.$forceUpdate()
}

附：关于el-select无法选中问题

场景：在el-dialog弹框中写el-select选中，发现无法选中，查询到一下解决办法，以做记录

解决：1、查看el-select属性v-model的值是否在data中定义

2、数据嵌套太多层，vue不能实时监测到数据更新，所以强制刷新

总结

到此这篇关于element el-select下拉框选择失效解决办法的文章就介绍到这了,更多相关el-select下拉框选择失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue实现锚点定位功能
这篇文章主要为大家详细介绍了vue实现锚点定位功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue.js实现简单计时器功能
这篇文章主要为大家详细介绍了vue.js实现简单计时器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue实现自定义组件改变组件背景色(示例代码)
要实现 Vue 自定义组件改变组件背景色,你可以通过 props 将背景色作为组件的一个属性传递给组件,在组件内部监听这个属性的变化,并将其应用到组件的样式中,下面通过示例代码介绍Vue如何实现自定义组件改变组件背景色,感兴趣的朋友一起看看吧
2024-03-03
关于vue表单提交防双/多击的例子
今天小编就为大家分享一篇关于vue表单提交防双/多击的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue引入高德地图并绘制点线面的方法
这篇文章主要介绍了vue引入高德地图并绘制点线面的实例代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
2024-03-03
Vue之监听方法案例详解
这篇文章主要介绍了Vue之监听方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-07-07
vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决(两种解决方法)
这篇文章主要介绍了vue 使用v-if切换输入框时导致输入框的数据内容没有清空的问题解决，本文给大家分享两种解决方法,需要的朋友可以参考下
2023-05-05
Vue中v-for的数据分组实例
下面小编就为大家分享一篇Vue中v-for的数据分组实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue3 Class 与 Style 绑定操作方法
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式,因为 class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定,这篇文章主要介绍了vue3 Class 与 Style 绑定操作方法,需要的朋友可以参考下
2024-05-05
vue中typescript装饰器的使用方法超实用教程
这篇文章主要介绍了vue中使用typescript装饰器的使用方法超实用教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06