<el-autocomplete
v-model="keyword"
:fetch-suggestions="handleQuery"
clearable
ref="inputRef"
placeholder="请输入内容"
@select="handleSelect"
>
<template #append>
<el-button @click="handleBusinessSearch">搜索</el-button
></template>
</el-autocomplete>
const inputRef = ref()
const keyword = ref('')
const suggestions = ref<Array<{ value: string; raw: any }>>()
const handleQuery = (keyword: string, cb: (args: any) => any) => {
if (!keyword.trim()) {
cb([])
return
}
// 示例的请求方法
req
.search(keyword)
.then((res) => {
const sugs = res.map((r) => ({
value: r.name,
raw: r,
})) as any
suggestions.value = sugs
cb(sugs)
})
.catch(() => {
cb([])
})
}
const handleSelect = (item: Record<string, any>) => {
console.log(item)
}
const handleBusinessSearch = async () => {
if (keyword.value.trim()) {
// 主要在于这步
inputRef.value.getData(keyword.value)
} else {
// 输入为空时
suggestions.value = []
}
}
关键在于获取el-autocomplete的组件实例,这里的getData相当于fetch-suggestions所绑定的方法,把你绑定的keyword传入调用就可以了