解决ant-design select组件远程搜索选项不更新的问题

最新推荐文章于 2024-01-08 15:17:56 发布

Vgbire

最新推荐文章于 2024-01-08 15:17:56 发布

阅读量3.9k

点赞数 14

文章标签： select 搜索 ant-design

本文链接：https://blog.csdn.net/rkhker/article/details/120291801

版权

本文介绍了在使用 Ant Design 的 Select 组件进行实时搜索时遇到的视图未更新的问题。问题源于 Select 组件内部的 filterOption 默认开启，导致外部数据更新后未正确显示。解决方案是通过设置 filterOption 为 false，阻止组件内部的筛选，从而实现视图正确显示远程搜索结果。

摘要由CSDN通过智能技术生成

代码如下，在搜索时调用handleSearch方法，去实时更新下拉选择的选项数据。但是下拉选项没有因为搜索更新，打印搜索后的list结果，发现list确实更新了有数据，但是视图没有更新，显示为空。

<a-select
  v-model="xxx"
  show-search
  placeholder="Please enter"
  :show-arrow="false"
  :not-found-content="null"
  @search="handleSearch"
>
  <a-select-option v-for="item in list" :key="item.value" :value="item.value">
    {{ item.label }}
  </a-select-option>
</a-select>

data() {
  return {
	xxx: '',
    list: []
  }
},
methods: {
	handleSearch(val){
		this.$http(url, { keyword: val }).then(res => {
			this.list = res.list
		})
	}
}