Antd Select如何实现即可搜索又可输入的操作

1、进入Select组件随便找一个合适的组件 (不一定如图)
在这里插入图片描述

2、代码删除后简洁如下 change focus等事件根据需求添加

<a-select
    v-model:value="name"
    show-search
    placeholder="Select a person"
    style="width: 200px"
    :options="options"
    //添加search事件
    @search="fetchName"
  >
  </a-select>

3、方法中使用

	options = [
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
        { value: 'tom', label: 'Tom' }
      ]

	    // 查询商品全称
    const fetchName= (value) => {
    //这一步是核心 
    //判断value是否存在 如果存在就把赋值给name, 这样select失去焦点后 不会清空输入信息
      if (value) {
        state.name = value
      }
		
	  //下面根据业务需求放查询请求
      ....
    }

这样就实现了即可搜索又可输入的操作

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐