ZBLOG

根据您的代码片段,问题出在 AccountStatus 映射关系和 a-select-option 的渲染逻辑上。以下是解决方案:

原因分析

  1. 当前代码中 v-for="(label,value) in AccountStatus" 说明您应该有一个名为 AccountStatus 的枚举对象
  2. 当后端返回 accountStatus:1 时,下拉框显示的是原始值 1 而非对应的文本”未入账”

解决方案

第一步:确保枚举定义正确

  1. // 建议使用标准枚举结构(示例):
  2. const AccountStatus = {
  3. 0: '已入账',
  4. 1: '未入账',
  5. 2: '处理中'
  6. }
  7. // 或反向映射(根据需要选择):
  8. const AccountStatus = {
  9. ENTERED: { value: 0, label: '已入账' },
  10. NOT_ENTERED: { value: 1, label: '未入账' }
  11. }

第二步:修改选项渲染方式(推荐两种方案)

方案一:直接使用对象枚举

  1. <a-select-option
  2. v-for="(label, value) in AccountStatus"
  3. :key="value"
  4. :value="value">
  5. {{ label }}
  6. </a-select-option>

方案二:使用数组形式(需调整数据结构)

  1. const statusOptions = [
  2. { value: 0, label: '已入账' },
  3.   { value: 1, label: '未入账' }
  4. ]
  1. <a-select-option
  2.   v-for="item in statusOptions"
  3.   :key="item.value"
  4.   :value="item.value">
  5.   {{ item.label }}
  6. </a-select-option>

关键检查点

  1. 确认数据流向:确保 record.addReconciliationLoanRequestList中的accountStatus确实是数值类型
  2. 调试建议:在模板中添加临时调试信息:
  1. <div>当前值类型:{{ typeof item.accountStatus }}</div>
  2. <div>可选值列表:{{ JSON.stringify(AccountStatus) }}</div>

完整修正示例

  1. // JS部分
  2. const AccountStatus = {
  3. 0: '已入账',
  4. 1: '未入账'
  5. }
  6. // Template部分
  7. <a-select
  8. v-model:value="item.accountStatus"
  9. placeholder="请选择入账状态"
  10. :disabled="isDetail">
  11. <a-select-option
  12. v-for="(label, value) in AccountStatus"
  13. :key="value"
  14. :value="Number(value)"> <!-- 确保类型一致 -->
  15. {{ label }}
  16. </a-select-option>
  17. </a-select>

如果仍有问题,可能是以下原因导致:

  1. AccountStatus枚举定义被意外覆盖
  2. item.accountStatus数据类型不匹配(字符串数字 vs Number)
  3. Vue响应式数据更新问题(尝试用.slice()创建新数组触发更新)

建议在Chrome开发者工具中使用Vue插件检查实时数据状态。


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

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

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

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

联系我们

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

微信号:3007537140

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

关注我们
x

注册

已经有帐号?