ZBLOG

如果传递的借据号需要使用数组包裹,你可以在 productRows 中使用一个对象数组,每个对象都包含 productNameloanInfoCode 属性。你还可以根据需要进行一些修改来支持多个借据号。以下是基于你提供的代码示例的更新:

<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;">
          <!-- 假设 loanInfoCodes 是一个数组 -->
          <template v-for="(code, codeIndex) in item.loanInfoCodes" :key="codeIndex">
            <a-input v-model:value="code"></a-input>
            <!-- 如果有多个借据号,可以显示它们 -->
            <span v-if="codeIndex < item.loanInfoCodes.length - 1">, </span>
          </template>
        </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>
// your script here...
export default {
  data() {
    return {
      isCustomerNotFound: true, // 示例状态,依据实际逻辑来设定
      productRows: [
        // 示例数据,实际应根据业务逻辑填充
        { productName: '产品A', loanInfoCodes: ['借据号1', '借据号2'] },
        { productName: '产品B', loanInfoCodes: ['借据号3'] }
      ],
    };
  },
  methods: {
    addProductRow() {
      // 添加新行的逻辑,这里假设添加一个新的空行
      this.productRows.push({ productName: '', loanInfoCodes: [''] });
    },
  },
};
</script>

修改点:

  1. 数组包装:在 productRows 中,每个项现在有 loanInfoCodes 数组,表示可能有多个借据号。
  2. 动态展示借据号:使用 v-for 遍历每个 loanInfoCodes 来展示所有对应的借据号输入框。
  3. 添加新行时初始化:当调用 addProductRow() 方法时,会向 productRows 添加一行,并初始化为具有一个空字符串的 loanInfoCodes

这样,在你的表单中就能正确处理和显示多个借据号。如果你想要更复杂的逻辑(例如添加更多的借据号输入框),可以在相应的方法中进行处理。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=22838

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?