记录一下el-autocomplete组件主动触发fetch-suggestions的方法

234 阅读1分钟
<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传入调用就可以了

a68f8ba8cd3e594ca3eb5d39b0d14e7f.png