Ant—Design下拉选择器自带搜索功能

<a-form-model-item label="赠品:" style="margin-top:20px">
  <a-select placeholder='请选择赠品' :filterOption="filterOption" show-search @change="filterGift">
    <a-select-option v-for="(item,index) in giveawayList" :key="index" :value="item.id">
      {{item.name}}
    </a-select-option>
  </a-select>
</a-form-model-item>
filterOption (input, option) {
  return (
    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  )
}

主要是 filterOption 和 show-search 来实现搜索,如下图所示:

posted @ 2021-10-30 14:25  夏冬青  阅读(1711)  评论(0编辑  收藏  举报