查了一下,是因为有element-ui源码有bug,主要原因是
参考该博客
autocomplete组件在执行清除事件时,将activated置为false。这时候下拉框不会显示了,而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心思路就是想办法把this.activated的值设置为true。或者是清除完后让输入框失去焦点。
解决办法有两种:
1.给el-autocomplete添加一个ref。在清除事件后调用 this.$refs.el_auto.activated = true
<el-form-item :label="$t('code_begin')" v-if="popoverForm.hasOwnProperty('code_begin')">
<el-autocomplete
class="inline-input"
v-model="popoverForm.code_begin_text"
:fetch-suggestions="querySearch"
size="medium"
:placeholder="$t('code_begin')"
@select="handleSelect($event,'begin')"
clearable
@clear="clearSelect('begin')"
ref="el_auto"
value-key="acc_title"
>
<i slot="suffix" class="el-input__icon el-icon-notebook-2 icon-style" @click="openChooseAccDialog('begin')" />
</el-autocomplete>
</el-form-item>
// clearable清除事件事件
clearSelect(type) {
console.log('type', type)
if (type === 'begin') {
this.popoverForm.code_begin_text = ''
this.popoverForm.code_begin = null
// 主要代码
this.$refs.el_auto.activated = true
} else if (type === 'end') {
this.popoverForm.code_end_text = ''
this.popoverForm.code_end = null
} else if (type === 'acc_no') {
this.popoverForm.acc_no_text = ''
this.popoverForm.acc_no = null
} else if (type === 'acc_subject') {
this.popoverForm.acc_no_text = ''
this.popoverForm.acc_no = null
} else if (type === 'assist_item_no') {
this.popoverForm.assist_item_text = ''
this.popoverForm.assist_item_no = null
}
this.$forceUpdate()
},
2.在清除事件里调用document.activeElement.blur()
因为我的控件使用到了多个el-autocomplete。每个都加上ref比较麻烦。所以使用该方法,只有一行代码。
将聚集的输入框失去焦点即可。
// clearable清除事件事件
clearSelect(type) {
console.log('type', type)
if (type === 'begin') {
this.popoverForm.code_begin_text = ''
this.popoverForm.code_begin = null
} else if (type === 'end') {
this.popoverForm.code_end_text = ''
this.popoverForm.code_end = null
} else if (type === 'acc_no') {
this.popoverForm.acc_no_text = ''
this.popoverForm.acc_no = null
} else if (type === 'acc_subject') {
this.popoverForm.acc_no_text = ''
this.popoverForm.acc_no = null
} else if (type === 'assist_item_no') {
this.popoverForm.assist_item_text = ''
this.popoverForm.assist_item_no = null
}
console.log('focus', document.activeElement)
// 主要代码
// document.activeElement获得了DOM中被聚焦的元素;.blur()取消聚焦
document.activeElement.blur()
this.$forceUpdate()
},