ZBLOG

要实现你描述的功能,可以使用 Vue.js 的动态渲染来根据 workOrderLoans 的数量生成相应数量的输入框。以下是一个更新后的示例,展示如何将产品名称和借据号变为可输入的框,并且在接收到多个贷款信息时展示相应数量的字段。

  1. <template>
  2. <div v-for="(loan, index) in workOrderLoans" :key="index">
  3. <a-row>
  4. <a-col :span="12">
  5. <a-form-item label="产品名称" style="width: 250%; margin-left: -130px">
  6. <a-input
  7. v-model:value="loan.productName"
  8. placeholder="请输入产品名称"
  9. :disabled="isEditing"
  10. />
  11. </a-form-item>
  12. </a-col>
  13. </a-row>
  14. <a-row>
  15. <a-col :span="12">
  16. <a-form-item label="借据号" style="width: 250%; margin-left: -130px">
  17. <a-input
  18. v-model:value="loan.loanInfoCode"
  19. placeholder="请输入借据号"
  20. :disabled="isEditing"
  21. />
  22. </a-form-item>
  23. </a-col>
  24. </a-row>
  25. <a-row>
  26. <a-col :span="12">
  27. <a-form-item label="结清状态">
  28. <a-select v-model:value="loan.remainingStatus" placeholder="请选择结清状态">
  29. <a-select-option value=""></a-select-option>
  30. <a-select-option value="已结清">已结清</a-select-option>
  31. <a-select-option value="未结清">未结清</a-select-option>
  32. <a-select-option value="代偿结清">代偿结清</a-select-option>
  33. </a-select>
  34. </a-form-item>
  35. </a-col>
  36. <a-col :span="12">
  37. <a-form-item label="货款金额">
  38. <a-input v-model:value="loan.totalAmount" placeholder="请输入贷款金额" />
  39. </a-form-item>
  40. </ a-col >
  41. </ a-row >
  42. < a-row >
  43. <
  44. a-col : span = "12" >
  45. <
  46. a-form-item label = "逾期天数" >
  47. <
  48. a-input v-model:value = "loan.dpd" placeholder = "请输入逾期天数" /
  49. >
  50. <
  51. / a-form-item >
  52. <
  53. / a-col >
  54. <
  55. a-col : span = "12" >
  56. <
  57. a-form-item label = "转账余额" >
  58. <
  59. a-input v-model:value = "loan.transferAmount" placeholder = "请输入转账金额"
  60. / >
  61. <
  62. / a-form-item >
  63. <
  64. / a-col >
  65. <
  66. / a-row >
  67. < hr />
  68. </div > <!-- 分隔线 -->
  69. </template >
  70. <script setup>
  71. // Import statements remain the same as before
  72. import { ref } from 'vue';
  73. const isEditing = ref(false); // Example flag for edit mode
  74. // Sample data for workOrderLoans
  75. const workOrderLoans = ref([
  76. { productName: '', loanInfoCode: '', remainingStatus: '', totalAmount: '', dpd: '', transferAmount: '' },
  77. ]);
  78. // Function to add an empty loan entry (optional)
  79. function addLoan() {
  80. workOrderLoans.value.push({
  81. productName: '',
  82. loanInfoCode: '',
  83. remainingStatus: '',
  84. totalAmount: '',
  85. dpd: '',
  86. transferAmount: ''
  87. });
  88. }
  89. // Call this function whenever you want to add another set of fields.
  90. // For example, you could bind it to an "Add Loan" button.
  91. </script>
  92. <style scoped>
  93. // Add any additional styles here if needed
  94. </style>

改动说明:

  1. 动态生成表单:通过 v-for 循环遍历 workOrderLoans,每个元素都显示一组输入框。
  2. 可输入的字段:将原来的选择器(如 select)替换为 input,允许用户手动输入内容。
  3. 样式调整:保留了之前样式,也可以根据需要进行调整。

添加新行:

  • 在代码中我还加入了一个函数 addLoan(),可以用于添加新的贷款信息行。如果需要的话,可以绑定到一个按钮上,以便用户可以动态添加更多的信息输入框。

这样就能满足你的需求,当有多个贷款信息时,会自动展示多组相关字段。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?