Ant Design Vue 中，搜索下拉框定制回弹内容，下拉显示名称+id，显示名称

可以使用 Ant Design Vue 中的 Select 组件，结合自定义模板来实现搜索下拉框定制回弹内容。具体步骤如下：

1. 在 Select 组件中，设置 show-search 属性为 true，表示开启搜索功能。

2. 设置 options 属性为需要展示的下拉框选项数据。其中，每个选项数据需要包含两个属性：id 和 name。

3. 使用 template 属性来自定义下拉框选项的展示模板。模板中可以使用 {{ item.name }} 来展示选项名称。

4. 使用 option-label-prop 属性来指定选项数据中的名称属性为 name。

下面是一个示例代码：

<template>
  <a-select
    show-search
    :options="options"
    :template="template"
    option-label-prop="name"
    @change="handleChange"
  />
</template>

<script>
export default {
  data() {
    return {
      options: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' },
      ],
      template: `
        <div>
          <span style="margin-right: 8px;">{{ item.name }}</span>
          <span style="color: #ccc;">{{ item.id }}</span>
        </div>
      `,
    };
  },
  methods: {
    handleChange(value) {
      console.log('选择了：', value);
    },
  },
};
</script>

在上面的示例代码中，通过设置 template 属性来自定义下拉框选项的展示模板，模板中展示了选项名称和 id。同时，通过设置 option-label-prop 属性来指定选项数据中的名称属性为 name。当用户选择某个选项后，会触发 handleChange 方法，可以在该方法中处理用户的选择行为。