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

简介: 解决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前端开发工程师!

相关文章
el-popover 点击取消按钮,弹窗仍然无法关闭
el-popover 点击取消按钮,弹窗仍然无法关闭
|
4月前
element组件库笔记一:element 框架中table表格复选框选中后,切换下一页之前选中复选框和数据消失的问题
这篇文章介绍了在Element UI框架中,如何解决表格组件复选框在分页时选中状态丢失的问题。
332 0
|
7月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
112 1
|
8月前
|
前端开发 JavaScript
vue+el-select下拉多选实现,全选,反选,清空功能源码
vue+el-select下拉多选实现,全选,反选,清空功能源码
215 0
|
9月前
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
基于elementUI的el-table组件实现按住某一行数据上下滑动选中/选择或取消选中/选择鼠标经过的行
|
9月前
点击div显示下拉框,然后下拉框中的点击事件不生效。
点击div显示下拉框,然后下拉框中的点击事件不生效。
|
9月前
|
JavaScript API
Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup
Element Plus组件库中的input组件如何点击查看按钮时不可编辑,点击编辑时可编辑使用setup
198 0
|
JavaScript
element-ui的popover弹出框点击取消
element-ui的popover弹出框点击取消
293 1
|
JavaScript
vue点击取消再点击选中(单选)
vue点击取消再点击选中(单选)