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&gt;     
   </el-select&gt;
</el-form-item&gt;

就是在表单中重复使用了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()
}

代码007普通

打赏 收藏 海报 链接