当前使用vue3@3.2.30 + element-plus@2.0.2,封装的
el-autocomplete
组件使用的vue2的写法。
一、问题描述
用element 的输入建议框,在点击清空按钮后,如果输入框已经是聚焦状态,再次输入内容时建议框不显示。el-autocomplete组件在执行清除事件时,将activated置为了false。当querySearch执行成功,activated仍为false,所以下拉框不显示。
二、解决
1、给el-autocomplete
添加一个ref
属性
<el-autocomplete
clearable
class="inline-input"
popper-class="autocomplete-option-list"
highlight-first-item
ref="cautocomplete"
@clear="clear"
...
>
2、清空事件中添加this.$refs.cautocomplete.activated = true
clear() {
this.$refs.cautocomplete.activated = true
// or this.$refs.cautocomplete.handleFocus() // 也ok
this.$emit('clear')
}