解决vue中el-date-picker type=daterange日期不回显的问题_vue.js_

vue中el-date-picker type=daterange日期不回显

原始代码

由于后台返回的数据是两个 yyyy-mm-dd 格式的日期(startTime,endTime)，因此一开始采用

this.ruleForm.time = [   this.baseDateTemp(res.data.startTime),   this.baseDateTemp(res.data.endTime), ]; //this.baseDateTemp是全局的转日期为时间戳的方法

问题发现及处理

问题

得到的日期可以渲染在 el-date-picker 上，但是修改的时候不会回显

经测试后发现，此时可以触发 input 方法，但不触发 change 方法

处理方式

在 input 方法中可知，修改时，el-date-picker 所绑定的 v-model 的值已经改变，但是控件中没有实时更新

最终选择采用 this.$set 方法进行数据的更新，并成功解决此问题

修改后代码如下

 testClick(e) {       this.$nextTick(() => {         this.ruleForm.time = null;         this.$set(this.ruleForm, "time", [e[0], e[1]]);       });     },     // 将后台获取到的两个日期转为time的方法修改为         this.$set(self.ruleForm, "time", [           this.baseDateTemp(res.data.startTime),           this.baseDateTemp(res.data.endTime)         ]);

el-date-picker 日期组件事件回显不生效

日期组件回显处理

使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。

default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

起始日期时刻为 12:00:00

使用说明

value-format="yyyy-MM-dd HH:mm:ss"

添加这个属性拿到事件是 你选中在输入框的书简 那么

v-model="value1" 这个value1 就是数组形式存在 

本文说明

日期组件时间回显-相信很多人会遇到同一个问题-即使后台返回的数据是 yyyy-MM-dd HH:mm:ss 这个形式直接赋值不生效的问题：

因为数组不是响应式的所以直接应返回的值直接赋值是没有效果的

使用如下方法解决问题：

this.$set(this.value1,0,'你后台返回的事件值yyyy-MM-dd HH:mm:ss') this.$set(this.value1,1,'你后台返回的事件值yyyy-MM-dd HH:mm:ss') $set this.$set(原数组, 索引值, 需要赋的值)

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！