点击清除按钮后,重新输入querySearchAsync有执行,也有返回值,但提示不显示。光标移到别处点击再回来有时又正常。
文档中,clearable 是input的属性, Autocomplete没有,clear事件是否影响cb()方法执行?(没找到cb()方法的文档以及源码)
处理方式:
通过反复测试对比发现,点击清除重新输入时input没有失去焦点,这个问题会导致再次输入时没有聚焦,所以出现不显示的问题。通过查看源码发现点击输入时候会执行以下方法,主要原因是把 this.activated的值设置为false了,然后回调成功的时候没有设置 this.activated = true,所以就导致了不显示的问题。源码如下:
handleFocus(event) {
this.activated = true;
this.$emit('focus', event);
if (this.triggerOnFocus) {
this.debouncedGetData(this.value);
}
},
handleBlur(event) {
this.$emit('blur', event);
},
// 清除的方法
handleClear() {
this.activated = false;
this.$emit('clear');
},
临时的解决办法是设置一个ref='autocomplete',然后清除的时候再执行this.$refs.elautocomplete.handleFocus()方法,解决的核心思路就是想办法把this.activated的值设置为true,如以下代码:
本地定义了一个autocompleteFocusFlag来判断是不是已经获取到了焦点
<el-autocomplete ref="autocomplete" v-model="publishForm.tutorName" @focus="autocompleteFlag=true" @blur="autocompleteFlag=false" :fetch-suggestions="getTutorName" @clear="searchHandle" class="el_input_autocomplete" clearable />
// 搜索
searchHandle() {
if(this.autocompleteFocusFlag) this.$refs.autocomplete.activated = true;
this.getTabList()
},