<el-autocomplete
ref="searchName"
class="inline-input"
v-model="searchValue"
:fetch-suggestions="querySearch"
placeholder="快速搜索菜单"
:trigger-on-focus="false"
@select="handleSelect"
@clear="onClear"
clearable
>
<template slot-scope="{ item }">
<div class="name" v-html="item.menuPath" v-if="item.menuPath"></div>
<div v-else>暂无数据</div>
</template>
</el-autocomplete>
// 防止搜索框清除后不显示建议bug
onClear() {
// 获取输入框节点,并使其失去焦点
this.$refs.searchName.$refs.input.blur()
// 触发屏幕点击事件,防止焦点冲突
document.body.click()
// 重新使输入框获得焦点。避免用户清空后需要重新点击输入框-改善体验
this.$refs.searchName.$refs.input.focus()
},
以上便是解决代码。
参考: