-Go服务器开发

看起来你想在 Vue 3 中使用 <script setup> 语法，并将借据号作为数组传递。下面是如何修改你的代码，以便通过 v-model 将借据号用数组包裹，并结合 <script setup> 的写法。

完整示例

<template>
  <div :class="{'fixed-height': isCustomerNotFound}" class="loanInfo">
    <a-row v-if="isCustomerNotFound" v-for="(item, index) in productRows" :key="index">
      <a-col :span="12">
        <a-form-item label="产品名称" style="width: 101%">
          <a-input v-model:value="item.productName"></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="借据号" style="width: 101%; margin-left: 5px;">
          <!-- 借据号的数组处理 -->
          <a-input v-model:value="item.loanInfoCodes[index]"></a-input>
        </a-form-item>
      </a-col>
    </a-row>
    
    <span
      v-if="productRows.length > 0 && isCustomerNotFound"
      class="jiahao"
      @click="addProductRow"
    >
      +
    </span>
  </div>
</template>

<style scoped>
.fixed-height {
  height: 300px; /* 根据需要设定固定高度 */
}
</style>

<script setup>
// 引入所需的 Vue 函数和其他可能需要的库
import { ref } from 'vue';

// 定义数据
const isCustomerNotFound = ref(true); // 示例状态，依据实际逻辑来设定
const productRows = ref([{ productName: '', loanInfoCodes: [''] }]); // 示例数据，依据实际逻辑填充

// 添加产品行的方法
function addProductRow() {
  productRows.value.push({ productName: '', loanInfoCodes: [''] });
}
</script>

修改说明

<script setup>：这是新的语法糖，使组件更简洁。
Reactive References：使用 ref() 创建响应式变量。
数组管理：对于每个 item，我们假设 loanInfoCodes 是一个数组，用于存储借据号。这允许为每个产品维护多个借据号。
添加新行：在 addProductRow 方法中，我们向 productRows 数组添加一个新的对象，该对象包含空的 productName 和一个包含单一空字符串的 loanInfoCodes 数组。