element ui的select显示数字

落华X

于 2022-10-24 14:59:51 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/LuoHuaX/article/details/127492726

前端专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了在前端开发中遇到的一个问题，即数据源中id为字符串与组件期望的整型id不匹配导致的问题。通过分析原始数据和赋值数据，发现类型不一致是问题关键。解决方案是确保两者类型统一，可以调整后端返回数据或前端处理数据。最终选择了在前端代码中将id转换为字符串，通过在`value`属性后添加`+''`实现。修改后的代码成功解决了问题，实现了预期效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题展示

在这里插入图片描述

二、查看select原始数据

在这里插入图片描述
可以看到id是整型的

三、查看赋值给select的数据

在这里插入图片描述
可以看到id是字符串，问题就在于这里，1 != '1' ，所以解决方法很简单，让他们一致，可以让后端把数据弄成整型的，或者让前端把数据弄成字符串

四、这里选择修改前端代码

//修改前
<el-option
  v-for="(item,index) in platformData"
  :key="index"
  :label="item.platform_name"
  :value="item.id"
/>
//修改后，在value后面加 + ''
<el-option
  v-for="(item,index) in platformData"
  :key="index"
  :label="item.platform_name"
  :value="item.id + ''"
/>