vue2 ant design Select选择器可输入可选择

Vue2 中 Ant Design 的 `Select` 组件是一个用于下拉选择的组件，它可以提供预设选项让用户直接选择，也可以支持用户输入搜索文本自定义查找选项。为了实现可输入并选择的功能，你需要按照以下步骤配置：

1. 引入所需的库：

<script src="https://unpkg.com/@ant-design/icons/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/antd@4/dist/antd.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/@ant-design/icons-vue@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/@ant-design/pro-components@latest"></script>

2. 安装 `@ant-design/pro-select` 包（如果尚未安装）：

npm install @ant-design/pro-select
# 或者
yarn add @ant-design/pro-select

3. 在 Vue 组件中使用 Select 组件：

<template>
  <div>
    <a-pro-select
      v-model="selectedValue"
      placeholder="请选择或输入搜索"
      allow-clear
      search-placeholder="请输入搜索关键字"
      option-filter-prop="value" <!-- 自定义过滤属性 -->
      on-search-change="handleSearchChange" <!-- 输入框变化事件 -->
    >
      <a-pro-option v-for="(item, index) in options" :key="index" :value="item.value">
        {{ item.label }}
      </a-pro-option>
    </a-pro-select>
  </div>
</template>

<script>
import { ProSelect } from '@ant-design/pro-components';

export default {
  components: {
    ProSelect,
  },
  data() {
    return {
      selectedValue: '',
      options: [
        // 假设这是你的选项数组
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        // 更多选项...
      ],
    };
  },
  methods: {
    handleSearchChange(query) {
      this.options = this.options.filter((item) =>
        item.label.includes(query)
      ); // 这里可以根据 query 来过滤选项
    },
  },
};
</script>

在这个例子中，`v-model` 控制选中值，`allow-clear` 允许清空选择，`on-search-change` 触发搜索改变事件，可以根据用户输入实时更新选项。