el-select有值无法选择点击无反应

871 阅读1分钟

问题描述:在使用el-select的时候,在进行提交等操作后,无法进行再次选择或者点击无反应或者反应迟钝的现象。

image.png

问题解决:

在网上找了一些方法,主要分为两种吧:

  1. 使用在el-select加一个 change 事件,运用 this.$forceUpdate()强制刷新的方式来解决。
  2. 使用 this.$set 来设置变量的值,让视图重新render
<el-select v-model="scope.row.files" multiple collapse-tags filterable clearable size="mini" placeholder="请选择关联材料" style="width: 100%" @change="$forceUpdate()">
  <el-option
    v-for="item in fileList"
    :key="item.id"
    :label="item.title"
    :value="item.id"
    :disabled="item.disableFlag"
  />
</el-select>

第二种方式我没有尝试,不过应该是和我后面的解决方式的性质是一样的,都是通过重新渲染列表的方式实现,应该也是能够解决的,不过我的这个方法应该更加简单粗暴,就是我尝试把option列表this.fileList清空重新获取一次,结果是能解决我的问题的。

clgl(allParams).then(res =>{
  this.$notify({
    title: '关联成功',
    type: 'success',
    duration: 2500
  })
  this.loading = false
  // 以下代码解决关联之后下拉框无法选值问题
  this.fileList = []
  this.resetForm()
}).catch(() => {
  this.loading = false
})