当前位置: 首页 > news >正文

解决el-select数据类型相同但是显示数字的问题

这个不是我写的,只是遇到的bug,写法问题,忽略了值的绑定的问题

源代码bug:

<el-selectv-model="schemeInfo.horizon"placeholder="请选择起报月份"clearablefilterable><el-option v-for="(option,index) in horizonOptions" :key="index" :value="option.value">{{ option.label }}</el-option></el-select> 

定义的数据:

这里的原来的string被我改成了Number,因为需要全等,不然就是显示里面的值,而不是label

      horizonOptions: [{ value: 0, label: '当年' },{ value: 1, label: '次年' }]

设置的默认值:

这里的 horizon: 0需要与上面的value为统一数据类型,也是数字

    schemeInfo: {schemeName: '',statCode: '',target: '',initMonth: '',horizon: 0},

看以上感觉都是对的哈,数据类型也是对的全等,但是就是显示不了中文

但是显示为:

问题原因所在:

  1. 在 el-option 中,只绑定了 :value 属性,但没有绑定 :label 属性

  2. 当选中选项时,el-select 默认会显示 value 而不是 label

关键修改点:

  1. 在 el-option 上添加了 :label="option.label" 属性

  2. 简化了 el-option 的内容,不需要在标签内再写 {{ option.label }}

  3. 确保 v-model 绑定的 schemeInfo.horizon 与 option.value 类型一致(都是数字)

改后代码:

 <el-selectv-model="schemeInfo.horizon"placeholder="请选择起报月份"clearablefilterable><el-optionv-for="(option, index) in horizonOptions":key="index":label="option.label":value="option.value"/></el-select>

修改后效果:

http://www.lryc.cn/news/580302.html

相关文章:

  • 【Project】基于kafka的高可用分布式日志监控与告警系统
  • C#扩展方法全解析:给现有类型插上翅膀的魔法
  • CMake基础:条件判断详解
  • 探索 Ubuntu 上 MongoDB 的安装过程
  • [Cyclone] 哈希算法 | SIMD优化哈希计算 | 大数运算 (Int类)
  • 【大模型】到底什么是Function Calling和MCP,以及和ReAct推理的关系是什么?
  • 若 VSCode 添加到文件夹内右键菜单中显示
  • 03_性能优化:让软件呼吸更顺畅
  • ABB焊接机器人智能节气仪
  • App爬虫工具篇-appium配置
  • AWS WebRTC:通过shell分析viewer端日志文件
  • 查看linux中steam游戏的兼容性
  • 权电阻网络DAC实现电压输出型数模转换Multisim电路仿真——硬件工程师笔记
  • C++构造和折构函数详解,超详细!
  • Linux基本命令篇 —— uname命令
  • 第二章-AIGC入门-开启AIGC音频探索之旅:从入门到实践(6/36)
  • 利用 AI 打造的开发者工具集合
  • 一个简单的分布式追踪系统
  • 指针篇(7)- 指针运算笔试题(阿里巴巴)
  • 物联网软件层面的核心技术体系
  • 论文解读:《DeepGray:基于灰度图像和深度学习的恶意软件分类方法》
  • 优象光流模块,基于python的数据读取demo
  • 新能源汽车功率级测试自动化方案:从理论到实践的革命性突破
  • 区块链技术在物联网(IoT)中的核心应用场景
  • SQL Server 进阶语法实战:从动态透视到存储过程的深度应用(第四课)
  • 高档宠物食品对宠物的健康益处有哪些?
  • 【C语言刷题】第十天:加量加餐继续,代码题训练,融会贯通IO模式
  • Webpack构建工具
  • Qt创建线程的方法
  • 学习开发之hashmap