使用element的e-date-picker遇到的坑:回显后无法更新数据

3,378 阅读1分钟

写增加和修改功能,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事件驱动日期选择器数据问题,完美解决。