解决element-plus el-autocomplete点击

当前使用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')
    }