Ant Design Vue 实现 ＜a-select＞ 选择器远程搜索可选择又可输入字符

Ant Design Vue 的 `<a-select>` 组件支持远程搜索和可输入字符的功能，可以通过设置其 `filter-option` 属性来实现。具体实现步骤如下：

1. 设置 `<a-select>` 的 `filter-option` 为自定义函数，该函数接收两个参数：输入的搜索关键词和选项对象，返回一个布尔值表示该选项是否符合搜索条件。

<a-select
  v-model="value"
  :filter-option="filterOption"
  :remote="true"
  :allow-clear="true"
  :show-search="true"
  :default-active-first-option="false"
  :loading="loading"
  :placeholder="'请输入搜索关键词'"
>
  <a-select-option
    v-for="item in options"
    :key="item.value"
    :value="item.value"
  >{{ item.label }}</a-select-option>
</a-select>

data() {
  return {
    value: '',
    options: [],
    loading: false,
  }
},
methods: {
  filterOption(input, option) {
    return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
  },
  async searchOptions(value) {
    this.loading = true
    // 调用远程接口获取选项列表
    this.options = await someApi.getOptions(value)
    this.loading = false
  },
},
watch: {
  value(newValue) {
    if (newValue) {
      this.searchOptions(newValue)
    } else {
      this.options = []
    }
  },
}

2. 设置 `<a-select>` 的 `remote` 属性为 `true`，表示开启远程搜索功能。

3. 设置 `<a-select>` 的 `allow-clear` 属性为 `true`，表示允许清空已选择的选项。

4. 设置 `<a-select>` 的 `show-search` 属性为 `true`，表示显示搜索框。

5. 设置 `<a-select>` 的 `default-active-first-option` 属性为 `false`，表示不默认选中第一项选项。

6. 设置 `<a-select>` 的 `loading` 属性为 `true`，表示正在加载选项列表。

7. 设置 `<a-select>` 的 `placeholder` 属性为提示用户输入搜索关键词的占位符。

8. 在组件的 `methods` 中定义 `filterOption` 方法，该方法根据输入的搜索关键词和选项对象判断该选项是否符合搜索条件。

9. 在组件的 `methods` 中定义 `searchOptions` 方法，该方法调用远程接口获取选项列表，并将结果保存到组件的 `options` 属性中。

10. 在组件的 `watch` 中监听 `value` 的变化，当 `value` 不为空时调用 `searchOptions` 方法获取选项列表，否则清空选项列表。