vue3+element-plus,el-autocomplete远程搜索，解决下拉框闪一下的问题
element-plus，在使用el-autocomplete时，通过远程搜索调用接口，想要实现，输入后调用接口，接口返回有数据就显示下拉框，没有数据就不显示下拉框。
根据element-plus中el-autocomplete的用法进行远程搜索时，就会发现：无数据时或请求中下拉框闪一下的问题。
<el-autocompletev-model="name":fetch-suggestions="querySearch"clearablemaxlength="30"placeholder="请输入":hide-loading="true":trigger-on-focus="false"@select="selectName"
/>原因：element-plus ，会在 fetch-suggestions 触发时立即渲染一个空下拉框（即使无数据），所以即使用了:hide-loading，还是会导致“闪一下”。
解决方案：
使用 activated 控制显隐
1、给组件加 ref
<el-autocompletev-model="name":fetch-suggestions="querySearch"clearablemaxlength="30"placeholder="请输入":hide-loading="true":trigger-on-focus="false"@select="selectName"ref="autocompleteRef"
/>2、在 querySearch 中手动控制 activated
在调用接口开始前把 acautocompleteRef.value.activated 变为 false
有数据且非空时，再设为
true
let autocompleteRef = ref()
const querySearch = async (queryString: string, cb: any) => {if (!queryString.trim()) {cb([])return}// 不显示下拉框，autocompleteRef.value.activated = falsetry {const{data} = await api(queryString)//必须要注意，el-autocomplete中的数组必须要有valuelet list = data.map((a: any) => {return {...a,value: a.name,}})let results = queryString? list.filter(createStateFilter(queryString)): listif (results.length > 0) {// 显示下拉框autocompleteRef.value.activated = true}cb(results)}catch(err) {cb([])}
}function createStateFilter(queryString: string) {return (state: any) => {return state.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1}
}
这个问题，找了很多方法，但是最后发现还是通过控制activated才能解决我的问题，而且这个方法也算是比较简单安全能精准解决我需求的一个方法了。