输入即搜索

这个功能目标有三点：

1. 输入即联想搜索（不用点按钮）
2. 不能太频繁请求接口（防抖）
3. 必须在“停止输入一段时间后”才触发搜索

用 watch + debounce，或者直接用 @vueuse/core 的 watchDebounced / useDebounceFn 是最优解

<template>
  <el-input
    v-model="keyword"
    placeholder="请输入关键字搜索"
    clearable
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { watchDebounced } from '@vueuse/core'

const keyword = ref('')

const fetchTableData = async (val: string) => {
  console.log('搜索请求：', val)
  // await api({ keyword: val, page: 1 })
}

watchDebounced(
  keyword,
  (val) => {
    fetchTableData(val)
  },
  {
    debounce: 500,   // 停止输入 500ms 后触发
    maxWait: 1000,   // 最多 1s 一定会触发一次（可选）
  }
)
</script>

maxWait有什么用

不管你一直输个不停，最长等 maxWait 这么久，也必须触发一次回调