date-picker之选中修改并回显

这几天上手了一个前端项目,本以为靠学的那点东西可以大展身手,没成想却处处碰壁。。。怎一个惨字了得。
小问题是这样的:
date-picker插件,其代码如下:

<a-date-picker showTime placeholder="Select Time" @change="onChange" @ok="onOk" />

默认表现形式是这样的:
在这里插入图片描述
我以为它是字符串形式的,在选中一条数据进行编辑回显时,发现dateSource里面的"2020-02-13 23:34:48"这么一个时间字符串死活不能显示在选择框里,其他的字段都可以正常显示。console.log之后才发现,date-picker里面选中的时间默认是moment对象,所以要想将时间字符串回显在选择框中,必须先将dateSource里面的"2020-02-13 23:34:48"转换成moment形式。

注意:起初的想法是将dateSource中所有的时间字符串全都变成moent形式,为此我还专门写了一个for循环去遍历,类似这种:在这里插入图片描述
虽然时间能在date-picker中回显出来,但是由于dateSource中的时间格式也变成了moment,导致正常列表中的时间不能显示了。
如下所示:在这里插入图片描述
最后大佬一语点醒梦中人,dateSource是源数据,最好不动,可以在获取到指定对象后(一行数据),将其传值setFormValues(values)函数中(一个专门获取数据并回显在编辑表单中的函数),然后再进行转换,这样一来,就是在获取对象后,对其中的数据进行转换,即就是在回显赋值时的操作,不会影响dateSource的数据格式。
在这里插入图片描述
转到edit组件后,进行moment格式转换:
在这里插入图片描述
这样就可以正常回显了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值