解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题

一、问题描述：

使用的前端UI框架为elementUI。

el-select组件在一个弹框中，打开该弹框，el-select可以正常选中，但是保存弹框中的表单信息关闭弹框后，再打开弹框，出现select组件无法选中的问题。

如上图，无法选中，但是所对应的data的值产生了变化，视图表现就是未选中状态。

二、问题解决

通过以上观察，很容易判断原因，那就是问题应该是出在el-dialog弹框上，而不是在select上，也就是关闭弹框时，弹框组件未销毁，有残留历史数据。

解决方法就是彻底销毁该组件，用v-if即可。

<el-dialog title="添加提示" :visible.sync="dialogRepVisible" width="780px" v-if="dialogRepVisible">

在网上还会有其他方案，比如说select的选项是动态加载的，当数据过来时，视图没有更新，需要使用：

<el-select v-model="data" placeholder="请选择" @change="change">
  <el-option v-for="(item, index) in 4" :key="index" :label="item" :value="item">{{ item}}</el-option>
</el-select>
<script>
change: function() {
  this.$forceUpdate()
}
</script>

等，但这个不适用于我这种情况。凡是要具体问题具体分析啊！

如果你在web前端开发、面试、前端学习路线有困难可以加我V：imqdcnn。免费答疑，行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师！