-Go服务器开发

要实现一个下拉框，能够从接口获取数据并支持多选，而不是回填已选择的内容，你可以使用 Vue 结合 Ant Design Vue 的 a-select 组件。下面是一个示例，演示如何设置这个功能：

获取数据：你需要通过 API 调用来获取可供选择的借据编号和产品名称。
实现多选：使用 mode="multiple" 来启用多选模式。

以下是更新后的代码示例：

<template>
  <a-row>
    <a-col :span="12" v-if="isCustomerAssociated">
      <a-form-item label="借据编号" style="width:250%; margin-left:-130px">
        <a-select
          v-model:value="formModal.loanInfoCodes"
          mode="multiple"
          placeholder="请输入借据编号"
          @search="fetchLoanInfoCodes"
          :options="loanInfoCodeOptions"
        />
      </a-form-item>
    </a-col>
  </a-row>
  <a-row>
    <a-col :span="12" v-if="isCustomerAssociated">
      <a-form-item label="产品名称" style="width:250%; margin-left:-130px">
        <a-select
          v-model:value="formModal.productNames"
          mode="multiple"
          placeholder="请输入产品名称"
          @search="fetchProductNames"
          :options="productNameOptions"
        />
      </a-form-item>
    </a-col>
  </a-row>
</template>
<script>
export default {
  data() {
    return {
      formModal: {
        loanInfoCodes: [],
        productNames: []
      },
      loanInfoCodeOptions: [],
      productNameOptions: [],
    };
  },
  methods: {
    async fetchLoanInfoCodes(value) {
      // 假设这里调用你的API来获取借据编号
      const response = await fetch(`/api/loan-info-codes?query=${value}`);
      const data = await response.json();
      
      // 将返回的数据转换为 a-select 所需的格式
      this.loanInfoCodeOptions = data.map(item => ({
        value: item.code,
        label: item.label || item.code // 显示文本，如果没有label就用code作为显示文本
      }));
    },
    
    async fetchProductNames(value) {
      // 假设这里调用你的API来获取产品名称
      const response = await fetch(`/api/product-names?query=${value}`);
      const data = await response.json();
      
      // 将返回的数据转换为 a-select 所需的格式
      this.productNameOptions = data.map(item => ({
        value: item.name,
        label: item.name // 显示文本，这里直接使用name作为显示文本
      }));
    }
  }
};
</script>