要实现你描述的功能,可以使用 Vue.js 的动态渲染来根据 workOrderLoans
的数量生成相应数量的输入框。以下是一个更新后的示例,展示如何将产品名称和借据号变为可输入的框,并且在接收到多个贷款信息时展示相应数量的字段。
<template>
<div v-for="(loan, index) in workOrderLoans" :key="index">
<a-row>
<a-col :span="12">
<a-form-item label="产品名称" style="width: 250%; margin-left: -130px">
<a-input
v-model:value="loan.productName"
placeholder="请输入产品名称"
:disabled="isEditing"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="借据号" style="width: 250%; margin-left: -130px">
<a-input
v-model:value="loan.loanInfoCode"
placeholder="请输入借据号"
:disabled="isEditing"
/>
</a-form-item>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="结清状态">
<a-select v-model:value="loan.remainingStatus" placeholder="请选择结清状态">
<a-select-option value=""></a-select-option>
<a-select-option value="已结清">已结清</a-select-option>
<a-select-option value="未结清">未结清</a-select-option>
<a-select-option value="代偿结清">代偿结清</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item label="货款金额">
<a-input v-model:value="loan.totalAmount" placeholder="请输入贷款金额" />
</a-form-item>
</ a-col >
</ a-row >
< a-row >
<
a-col : span = "12" >
<
a-form-item label = "逾期天数" >
<
a-input v-model:value = "loan.dpd" placeholder = "请输入逾期天数" /
>
<
/ a-form-item >
<
/ a-col >
<
a-col : span = "12" >
<
a-form-item label = "转账余额" >
<
a-input v-model:value = "loan.transferAmount" placeholder = "请输入转账金额"
/ >
<
/ a-form-item >
<
/ a-col >
<
/ a-row >
< hr />
</div > <!-- 分隔线 -->
</template >
<script setup>
// Import statements remain the same as before
import { ref } from 'vue';
const isEditing = ref(false); // Example flag for edit mode
// Sample data for workOrderLoans
const workOrderLoans = ref([
{ productName: '', loanInfoCode: '', remainingStatus: '', totalAmount: '', dpd: '', transferAmount: '' },
]);
// Function to add an empty loan entry (optional)
function addLoan() {
workOrderLoans.value.push({
productName: '',
loanInfoCode: '',
remainingStatus: '',
totalAmount: '',
dpd: '',
transferAmount: ''
});
}
// Call this function whenever you want to add another set of fields.
// For example, you could bind it to an "Add Loan" button.
</script>
<style scoped>
// Add any additional styles here if needed
</style>
改动说明:
- 动态生成表单:通过
v-for
循环遍历workOrderLoans
,每个元素都显示一组输入框。 - 可输入的字段:将原来的选择器(如
select
)替换为input
,允许用户手动输入内容。 - 样式调整:保留了之前样式,也可以根据需要进行调整。
添加新行:
- 在代码中我还加入了一个函数
addLoan()
,可以用于添加新的贷款信息行。如果需要的话,可以绑定到一个按钮上,以便用户可以动态添加更多的信息输入框。
这样就能满足你的需求,当有多个贷款信息时,会自动展示多组相关字段。
内容由零声教学AI助手提供,问题来源于学员提问