el-date-picker时间控件绑定的数据改变后,控件显示不更新
页面上需要根据不同数据类型赋值不同的时间范围,
时间控件在form中,时间绑定数据为 daterangeMonitorTime,定义时候默认当天的0点-now, daterangeMonitorTime: [new Date(new Date().setHours(0, 0, 0, 0)),new Date()],
<el-form-item label="监测时间"> <el-date-picker v-model="daterangeMonitorTime" style="width: 340px" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker> </el-form-item>
vue中监听数据类型改变则更改范围
watch: { dataType: { deep: true, handler(val) { //根据类型调整时间 if(val=="hour"){ this.daterangeMonitorTime = [new Date(new Date().setHours(0, 0, 0, 0)),new Date()]; }else if(val=="day"){ var lastDay=new Date().setDate(new Date().getDate()-1); this.daterangeMonitorTime = [new Date(lastDay).setHours(0, 0, 0, 0),new Date()]; }else{ this.daterangeMonitorTime=[new Date(new Date().setHours(new Date().getHours()-1)),new Date()]; //用下面这种方式就无法更新 //this.daterangeMonitorTime[0]=new Date(new Date().setHours(new Date().getHours()-1)); //this.daterangeMonitorTime[1]=new Date(); } } } },
刚开始分别赋值 daterangeMonitorTime[0] 和 daterangeMonitorTime[1] ,daterangeMonitorTime 中时间已经改变,但是页面一直无法刷新。后来直接赋值 this.daterangeMonitorTime 后可以。