如果传递的借据号需要使用数组包裹,你可以在 productRows
中使用一个对象数组,每个对象都包含 productName
和 loanInfoCode
属性。你还可以根据需要进行一些修改来支持多个借据号。以下是基于你提供的代码示例的更新:
<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>
修改点:
- 数组包装:在
productRows
中,每个项现在有loanInfoCodes
数组,表示可能有多个借据号。 - 动态展示借据号:使用
v-for
遍历每个loanInfoCodes
来展示所有对应的借据号输入框。 - 添加新行时初始化:当调用
addProductRow()
方法时,会向productRows
添加一行,并初始化为具有一个空字符串的loanInfoCodes
。
这样,在你的表单中就能正确处理和显示多个借据号。如果你想要更复杂的逻辑(例如添加更多的借据号输入框),可以在相应的方法中进行处理。
内容由零声教学AI助手提供,问题来源于学员提问