输入完成后请求接口查询

拿element-plus的el-select组件举例：

change方法：当所选值发生变化时触发

当我们输入的值发生变化时，会频繁的触发请求，这显然不可取，可以优化，当我们输入完成后自动触发请求。（也可以优化成enter触发或者空格键触发，这里主要还是记录如何输入完成后自动触发请求）

<template>
  <div class="select-filter">
    <span class="label">{{ condition.label }}：</span>
    <el-select
    :loading="loading"
    filterable
    v-model="value"
    clearable
    remote
    @change="changeValue"
    @focus="getData"
    :remote-method="remoteCondition"
    placeholder="请选择或输入搜索">
      <el-option
        v-for="item in conditionList"
        :disabled="item === null"
        :key="item.value"
        :label="item.text"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

加定时器

   const timeout = ref() // 全局
    const changeValue = () => {
      clearTimeout(timeout.value)
      console.log('props.attr', props.condition.attr)
      values.value[props.condition.attr] = value.value
      console.log(values.value)
      const data = {
        ...props.condition,
        symbol: 'equal',
        ...values.value
        // value: value.value ? value.value : []
      }
      console.log('values', data)
      timeout.value = setTimeout(() => {
        emit('dataChange', data)
      }, 500)
      // emit('getSelectData', data)
    }