ant design vue 中select搜索和远程数据结合（vue2写法）

需求：输入“房间号”，下拉实时查询内容，选择对应房间。

需要用到select的搜索和远程数据结合

框架是ant design vue的V2版本, 用的Vue2写法.（看了ant原生框架，写法不一样，我这个比较容易理解）

下面是测试数据效果图：

具体代码

<a-select
   v-model:value="values"
    :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"
    @change="roomChange"
  >
</a-select>

踩坑：绑定的Id值为 undefined，才会显示placeholder。 （非常坑）

 data() {
    return {
		options:[],  //房间下拉列表
		values:undefined,   //绑定的Id值     undefined才会显示placeholder
		
	}
}

  methods: {
     //下拉列表
    async handleSearch(val){
      console.log(val)
      this.options=[];
      //下拉模糊查询
      const res = await ReportApi.getRoom({   //请求的API
        doorNumber: val,
      });
      console.log(res);
      res.data.forEach((item) => {
        this.options.push({              //循环，把值装进去
          value: item.id,
          label: item.roomName,
        });
      });
    },
    
    roomChange(val){
      console.log(val);
    },
}

写法很简单，就是看框架麻烦一点。 如果对你有帮助，点个赞呗！