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

2023.1.11今天我学习了使用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下拉框选择失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！