如下图点击按钮后出现下拉框,下拉框的数据为调用接口
<el-autocomplete
v-model="name"
:fetch-suggestions="querySearch"
placeholder="请输入"
@select="change">
<template #suffix>
<el-icon v-if="remoteLoading" class="pointer is-loading"><Loading /></el-icon>
<el-icon v-else class="pointer" @click="search(name)">
<Search />
</el-icon>
</template>
</el-autocomplete>
let globalCb // 主要思路就是把cb回调函数自己存一份 需要用的时候自己调用即可
const querySearch = (queryString: string, cb: any) => {
if(!globalCb) globalCb = cb
const results = queryString
? entList.value.filter(createFilter(queryString))
: entList.value
cb(results)
}
const createFilter = (queryString: string) => {
return (restaurant: any) => {
return (
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
)
}
}
const search = (name: string) => {
entList.value = [
{ value: 'vue', link: 'https://github.com/vuejs/vue' },
{ value: 'element', link: 'https://github.com/ElemeFE/element' },
{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
{ value: 'babel', link: 'https://github.com/babel/babel' },
]
globalCb(entList.value)
}
const change = (val: any) => {
console.log(val)
}