建设银行的官方网站电话wordpress 建站 教程视频

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

1. 在调用接口开始前把 acautocompleteRef.value.activated 变为 false

2. 有数据且非空时，再设为 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才能解决我的问题，而且这个方法也算是比较简单安全能精准解决我需求的一个方法了。