vue3+ant design vue实现表单模糊查询

1、效果图

2、代码

<a-form-item
 name="handlerUserId"
 label="负责人"
 labelAlign="left"
 :rules="[{ required: true, message: '请输入负责人' }]"
>
    <a-select
     v-model:value="formStateAdd.handlerUserId"
     showSearch
     placeholder="请输入负责人"
     class="select_style"
     :listHeight="120"
     @search="debouncedHandleSearch "
     @change="handleChange"
    >
        <a-select-option
        v-for="(item, index) in filteredOptions"
        :key="index"
        :value="item.key"
        >
           {{ item.fullName }}
        </a-select-option>
     </a-select>
</a-form-item>

const filteredOptions = ref([]);
  // 当用户在搜索框中输入内容时触发，用于执行模糊查询
  const handleSearch = async (fullName) => {
    console.log('用户搜索值', fullName);
    let options = []; //从后端接口返回的数据
    if (!fullName) {
      filteredOptions.value = [];
      return;
    }
    // 查询人员
    await queryUserAllByName({ fullName }).then((res) => {
      // options = res;
      options = res.filter((option) =>
        option.fullName.toLowerCase().includes(fullName.toLowerCase()),
      );

      console.log('查询人员', options);
      for (let item of options) {
        filteredOptions.value.push({
          fullName: item.fullName + '(' + item.workNum + ')',
          key: item.fullName + '(' + item.workNum + ')',
        });
      }
    });
  };

  function debounce(func, wait) {
    let timeout;
    return function (...args) {
      clearTimeout(timeout);
      timeout = setTimeout(() => func(...args), wait);
    };
  }
  const debouncedHandleSearch = debounce(handleSearch, 1000);

  // 当选项改变时触发，更新表单状态
  const handleChange = (value) => {
    console.log('选中的值', value);
    formStateAdd.value.handlerUserId = value;
  };