【Vue】el-autocomplete禁用时仍会触发下拉的问题

文章目录

• 问题
• 解决

问题

el-autocomplete 禁用时，点击后仍会触发下拉，导致出现bug

<el-autocomplete
  v-model="modelValue"
  :fetch-suggestions="queryAsync"
  class="autocomplete"
  :disabled="isDis"
  @select="doSelect($event, item)"
  @change="doChange($event, item)"
  clearable
  placeholder="请输入"
>
</el-autocomplete>

解决

试了一下官方disabled属性、@focus、@click.stop均不起作用，最后无奈只能在查询方法那里做处理

function queryAsync(queryString, cb) {
  // 重点
  if (!queryString || isDis.value) {
    cb([])
    return
  }
  const data = {}
  queryFn(data).then((res) => {
    cb(res)
  })
}