el-date-picker时间控件绑定的数据改变后,控件显示不更新
页面上需要根据不同数据类型赋值不同的时间范围,
时间控件在form中,时间绑定数据为 daterangeMonitorTime,定义时候默认当天的0点-now, daterangeMonitorTime: [new Date(new Date().setHours(0, 0, 0, 0)),new Date()],
1 2 3 4 5 6 7 8 9 10 11 | < 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中监听数据类型改变则更改范围
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | 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 后可以。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix