实现一个基于元素ui按周选择时间范围的功能
背景公司有一个用vue+elementui开发的项目需要实现这样一个需求：以周为周期选择一个时间范围，并以日期格式显示，可以快速选择上周，最近四个星期。。.antd里面有weeksforrangeselector，悲催的是没有elementui，也没有找到类似的，只好把下图封为antd了。下图是elementui。只有日期范围和月份范围，没有周范围……思路有两种思路是控制两个独立的周选择器，实现日期选择器的联动改造。选择特定日期时，相应的整行将改变颜色。到这里，终于用到了第一种思路。使用时刻库??。使用和安装都非常简单，自己安装即可达到效果。：模板部分，这里的value1和value2的值是我们选择的星期几，格式为GMT；date1和date2是weekselector的值对应的日期，date1取当周的周一（开始日期），date2取当周的周日（结束日期），weekNum是周数实现代码模板结构：循环选择：到从{{date1}}到{{date2}}，共{{weekNum}}周
weekNum计算：computed:{weekNum(){returnMath.round((this.value2-this.value1)/(24*60*60*1000*7))+1},},data:data(){return{value1:null,value2:null,date1:'',date2:'',pickerOptions:{firstDayOfWeek:1,disabledDate:(time)=>this.getDisabledDate(time,'start'),shortcuts:[{text:'nearly1week',onClick:(picker)=>{this.onWeekChange(picker,1)}},{text:'过去4周',onClick:(picker)=>{this.onWeekChange(picker,4)}},{text:'过去12周',onClick:(picker)=>{这个。onWeekChange(picker,12)}}]}}}，在created中设置一个开始日期，这里设置值为最近一周的星期一，created(){this.value1=this.value2=moment().isoWeekday(-5).toDate()}，监听value1，value2，当他们更改手表时更新日期：{value1(){if(!this.value1)returnif(this.value1>=this.value2){//确保value2大于value1this.value2=this.value1}this.date1=moment(this.value1.getTime()-24*60*60*1000).format('YYYY-MM-DD')this.onValueChange()//这里是我们要在值变化时触发的方法},value2(){if(!this.value2)returnthis.date2=moment(this.value2.getTime()+5*24*60*60*1000).format('YYYY-MM-DD')这个.onValueChange()},}选择近k周后触发操作method:{onWeekChange(picker,k){//选择近k周后触发操作this.value1=moment().isoWeekday(-(5+(k-1)*7).toDate()this.value2=moment().isoWeekday(-5).toDate()//value2与k值无关，因为永远是最近一周的星期一$forceUpdate()//这里如果不强制更新视图，value值会改变但是视图中的星期和日期不会改变},}补充前面的方法，在选择快捷方式选项时，会请求两次接口，所以把this.onValueChange()取出来放在控件的@change方法中，就可以避免这个问题
至
