Vue实现点击时间获取时间段查询功能

本文实例为大家分享了vue按时间段查询的案例,效果图如下

这里写图片描述

HTML代码

rush:xhtml;">

vue.js代码 点击事件

rush:js;"> //获取时间、 //时间解析; Time:function(Now) { let year=new Date(Now).getFullYear(); let month=new Date(Now).getMonth()+1; let date=new Date(Now).getDate(); if (month < 10) month = "0" + month; if (date < 10) date = "0" + date; return year+"-"+month+"-"+date },//本周第一天; showWeekFirstDay:function() { let Nowdate=new Date(); let WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000); let M=Number(WeekFirstDay.getMonth())+1; if(M<10){ M="0"+M; } let D=WeekFirstDay.getDate(); if(D<10){ D="0"+D; } return WeekFirstDay.getFullYear()+"-"+M+"-"+D; },//本周最后一天 showWeekLastDay:function () { let Nowdate=new Date(); let WeekFirstDay=new Date(Nowdate-(Nowdate.getDay()-1)*86400000); let WeekLastDay=new Date((WeekFirstDay/1000+6*86400)*1000); let M=Number(WeekLastDay.getMonth())+1; if(M<10){ M="0"+M; } let D=WeekLastDay.getDate(); if(D<10){ D="0"+D; } return WeekLastDay.getFullYear()+"-"+M+"-"+D; },//获得某月的天数: getMonthDays:function (myMonth){ let monthStartDate = new Date(new Date().getFullYear(),myMonth,1); let monthEndDate = new Date(new Date().getFullYear(),myMonth + 1,1); let days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24); return days; },//点击事件 query:function (way) { let self=this; this.$refs.pag.currentPage=1; this.page=this.$refs.pag.currentPage; switch (way){ case 'today': this.startTime=this.maxTime; this.endTime=this.maxTime; break; case 'yesterday': this.startTime=this.Time(new Date().getTime()-24*60*60*1000); this.endTime=this.Time(new Date().getTime()-24*60*60*1000); break; case 'weeks': this.startTime=this.showWeekFirstDay(); this.endTime=this.maxTime; break; case 'lastWeek': this.startTime=this.Time(new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate()-new Date().getDay()-6)); this.endTime=this.Time(new Date(new Date().getFullYear(),new Date().getDate()+(6-new Date().getDay()-6))); break; case 'month': this.startTime=this.Time(new Date(new Date().getFullYear(),1)); this.endTime=this.maxTime; break; case 'lastMonth': this.startTime=this.Time(new Date(new Date().getFullYear(),new Date().getMonth()-1,1)); this.endTime=this.Time(new Date(new Date().getFullYear(),this.getMonthDays(new Date().getMonth()-1))); break; } this.$axios({ method:'post',url:'/inter/user/queryMemberReport',data:{ 'account':this.account,'baseLotteryId':this.lottersId,'startTime':this.startTime,'endTime':this.endTime } }).then(function (data) { // console.log(data) }).catch(function (error) { console.log(error); }) }

这样一个点击查询时间段效果就可以实现了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
&lt;el-form-item label=&quot;入库类型&quot; ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...