Vue ant-design select组件搜索和远程数据结合

纯记录
需求：输入“商品”，下拉实时查询内容，选择对应商品内容
效果ant组件实例有

相关代码

 const options = ref([]);
 const formState = reactive({
  name: null,
 });
 //下拉列表
    const  List = async (str) => {
      const res = await Api.page({
        Title: str,
      });
      res.list.forEach((item) => {
        options.value.push({
          value: item.uuid,
          label: item.name,
        });
      });
    };
    //下拉模糊查询
    const handleSearch = (val) => {
      options.value = [];
      List(val);
    };
   return{
     handleSearch,
   }

升级版(从html到js全部代码）

 
    
        
     
 
 import { debounce } from "lodash-es";
	//下拉列表
	const state = reactive({
	  list: [],
	  map: {},
	  loading: false,
	});
	//下拉模糊查询
	const load = debounce(async (value) => {
	  if (state.loading) {
	    return;
	  }
	  try {
	    state.loading = true;
	   state.list = [];
	    const res = await  Api.page({
	      Title: value,
	    });
	    const map = {};
	    state.list = res.list?.map((item) => {
	      map[item.uuid] = item;
	      return {
	        value: item.uuid,
	        label: item.name,
	      };
	    });
	   state.map = map;
	  } finally {
	    state.loading = false;
	  }
	}, 500);
	 onMounted(() => {
	    loadPage();
	    load();
	 });
	 return{
	   loadCollection,
	   collectionsState,
	 }