写增加和修改功能,form一样,为了省事两个用了同一个form。在修改时,回显后的日期选择控件无法修改了。 测试后发现修改后的数据可以得到,也就是只是前段显示问题。
只需要在赋值的时候使用this.$set(原数组, 索引值, 需要赋的值)或者
this.$set(this.formList, "datatime", new Date());
this.formList.datatime = ['21:56:00', '23:15:16']
原理是由于:
我在使用elementUI里的日期选择器时,遇到了当没有设置选择器的初始值,首次打开,选择日期后,可以拉起@change事件;而当设置好回显值(初始值)时,无法拉起change事件的问题。
官网的el-date-picker组件的事件有以下三种:
官方文档中的事件
经过测试,当事件绑定改为blur时,拉起handleTimestamp方法成功。看来原因出在事件监听的方式绑定上面。
@blur="handleTimestamp"
我们再看一下源码中,为什么是blur才行:
node_modules里,date-picker组件内监听picker显示隐藏属性里拉起blur函数,但未拉起change函数。
使用blur事件驱动日期选择器数据问题,完美解决。