UI组件库(element 、antdesign 等)下拉组件值为id不回显的坑

1、你们是否也遇到过,我们常用下拉组件,然而平时用的好好的,万一哪天突然来了一个新小伙伴,把下拉的数据id定义为了number类型和以前的string不一样,这次同样的组件,却突然回显不生效,也不报错,搞得你很难受,抓耳挠腮,各种赋值方法用个遍都不生效,是不是很痛苦,下面我就告诉你原因和解决方法。

2、其实是因为下拉组件的value默认是string,就算你用的number,提交啥都没问题,但实际上使用的时候,内部会自动转string去识别,所以会匹配不上下拉的数据,无法回显label,

不管是使用ant design还是element等UI库的下拉组件,一定要记得,下拉选项不要用number值,比如:有些后端会返回的数据如下[{id:1,name:"aa"},{id:2,name:"bb"}],这时候我们提交没问题,编辑也没有问题,但是最大的坑是回显

3、那怎么办呢?

方法一:协商后端修改:协商后端去把id的numbre类型改为string,前端不用修改

方法二:前端对据处理成string: 前端把接口数据查询回来后遍历所有数据,把id都转成string

方法三:前端新增字段处理 :把接口数据遍历,加一个value字段,用户存放转为string的id,避免修改原来数据,方便以后定位问题

注意:id一定不要用number,否则编辑回显会把你坑惨了,你会百思不得其解,就算你用了各种方法,好像都不生效,赋值了,下拉框却只展示对应的id,所以下次记得哦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值