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

原创已于 2022-07-25 18:08:53 修改 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #typescript

于 2022-06-10 16:07:19 首次发布

本文展示了如何使用Ant Design Vue库创建一个下拉搜索组件，并进行了实时查询和模糊搜索的实现。通过引入防抖动(debounce)函数优化了搜索性能，确保在用户停止输入一段时间后才发起请求，减少了不必要的API调用。此外，还提供了完整的HTML和JS代码示例，包括错误加载状态的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

相关代码

 <a-form-item name="name">
          <a-select
            v-model:value="formState.name"
            :default-active-first-option="false"
            :filter-option="false"
            :not-found-content="null"
            :options="options"
            :show-arrow="false"
            placeholder="请输入名称"
            show-search
            style="width: 250px"
            @search="handleSearch"
          >
 </a-select>
</a-form-item>

 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全部代码）

 <a-form-item label="名称" name="uuid">
    <a-select
        v-model:value="formStateuuid"
        show-search
        placeholder="请输入名称"
        style="width: 300px"
        :filter-option="false"
        :options="state.list"
        @search="loadCollection"
      >
        <template v-if="state.loading" #notFoundContent>
          <a-spin size="small" />
        </template>
     </a-select>
 </a-form-item>
 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,
	 }