Ant Design Vue 中，搜索下拉框，搜索时下拉显示“名称”、“编号”等信息，选中后搜索下拉框显示“名称”信息

在 Ant Design Vue 中，搜索下拉框可以通过 `show-search` 属性来开启搜索功能，同时可以使用 `filter-option` 属性来定义搜索时的过滤函数。在过滤函数中，我们可以根据输入的关键字来过滤下拉框中的选项，并返回一个新的选项列表。

为了实现搜索时下拉显示“名称”、“编号”等信息，我们可以将每个选项定义为一个包含多个属性的对象，例如：

[
  { id: 1, name: 'Option 1', code: 'A001' },
  { id: 2, name: 'Option 2', code: 'B002' },
  { id: 3, name: 'Option 3', code: 'C003' },
  // ...
]

然后，在 `filter-option` 函数中，我们可以根据输入的关键字来筛选出包含关键字的选项，并返回一个新的选项列表，例如：

<template>
  <a-select
    show-search
    :filter-option="filterOption"
    :options="options"
    v-model="selectedOption"
  >
    <a-select-option v-for="option in filteredOptions" :key="option.id">
      {{ option.name }} ({{ option.code }})
    </a-select-option>
  </a-select>
</template>

<script>
export default {
  data () {
    return {
      options: [
        { id: 1, name: 'Option 1', code: 'A001' },
        { id: 2, name: 'Option 2', code: 'B002' },
        { id: 3, name: 'Option 3', code: 'C003' },
        // ...
      ],
      selectedOption: null,
      filteredOptions: []
    }
  },
  methods: {
    filterOption (input, option) {
      const { name, code } = option.data
      return name.includes(input) || code.includes(input)
    }
  },
  watch: {
    options () {
      // 更新筛选后的选项列表
      this.filteredOptions = this.options.filter(option => this.filterOption(this.input, option))
    }
  }
}
</script>

在上面的例子中，我们使用了 `filter-option` 方法来定义筛选函数，它接受两个参数：输入的关键字和当前选项。在筛选函数中，我们从选项的 `data` 属性中获取名称和编号，并使用 `includes` 方法来判断是否包含输入的关键字。

另外，我们使用了 `watch` 来监听选项列表的变化，当选项列表发生变化时，我们需要重新计算筛选后的选项列表，并更新到组件的 `filteredOptions` 属性中，以便在模板中显示。