关于在el-table里使用el-datePicker设置默认时间后导致修改时间无效的问题

探讨在ElementUI的el-table中使用时间组件设定默认值后,手动修改时间显示不变的问题。通过深拷贝数据解决,确保组件响应性。

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

关于在el-table里使用了时间组件,设置了默认显示值之后,手动修改时间失效的问题
之前在项目里使用了elementUI里的el-table表格里又使用了时间组件,具体代码如下:

然后业务这边提了个需求,给时间设置默认值,开始时间为当天的0点,结束时间为2999年年底。于是我用了函数求出当前时间并转换为‘2019-10-10 00:00:00’这样的字符串格式。这样页面刚打开时会默认显示开始结束时间。但是点击修改时间发现显示的值不变,感觉就像不能修改默认值。
但是经过验证发现数据其实已经改变了,仅仅是页面显示的值没变。之后意外发现了原因,表格绑定的数据源不是从后台请求得到的数据,而是从父组件直接传递的,没有用到props传递。然后父组件传递的数据类型虽然还是数据Array,但数组里有个 ob: Observer这样的属性。就是这个属性导致显示显示的值始终都是默认值,不会改变。
解决方式是深拷贝从父组件传递过来的数据,拷贝后的数据不带有__ob__: Observer属性,并且页面的时间也能修改了。
在这里插入图片描述
还有一个问题。在弹窗页面使用的时间组件,组件修改数据绑定的是change方法,然后在函数里默认会有个参数,就是点击时间组件修改后的值,直接将值保存就可以了。即使在编辑弹窗页,时间组件会显示个默认值,并且数据也能正常修改。
在这里插入图片描述
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值