vue如何解决el-select下拉框显示ID不显示label问题
作者：G-old
这篇文章主要介绍了vue如何解决el-select下拉框显示ID不显示label问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
解决el-select下拉框显示ID不显示label
问题
Form中用el-select显示订单状态：
<el-select v-model="dataForm.orderStatus"> <el-option label="待支付" value="0"></el-option> <el-option label="已支付" value="1"></el-option> <el-option label="已确认" value="2"></el-option> <el-option label="已取消" value="3"></el-option> </el-select>
界面显示value，不显示label
最终解决方法
在option的value属性前加冒号“：”
<el-select v-model="dataForm.orderStatus"> <el-option label="待支付" :value="0"></el-option> <el-option label="已支付" :value="1"></el-option> <el-option label="已确认" :value="2"></el-option> <el-option label="已取消" :value="3"></el-option> </el-select>
完美解决
修改组件el-select默认展示id不展示label
项目中有修改组件，点击获取到表单的数据，但是有一个下拉框展示的是id而不是name
看了半天代码，双向绑定和传值都没问题，查了半天资料最后发现是后端传给我的id字段和前端的id类型不同，一个是字符串一个是number，返回的数字和el-option选框里的value值类型对应不上
解决办法
将v-for遍历的数组中id字段都改成number类型
修改前：
修改后：
修改后页面正常显示：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。