vue 实现上一周、下一周切换功能

效果图:

 

 

 

html 显示部分:

 

 

js 显示部分:

    preNextBtn(val){
        let _this = this;
        this.tableList = []; //数据重置为空       
        _this.showTips = false; //显示loading
                
        let fieldValue = this.yearNum;
        let yearStart = new Date(parseInt(fieldValue),0,1) //设置该年1.1.
            let firstDay = yearStart.getDay(); //星期
            let yearEnd = new Date(parseInt(fieldValue),11,31) //设置该年12.31.
            let endDay = yearEnd.getDay(); //星期
            //------------------------------------------------------------------------------------- 
            //判断输入是否超过最大周次.
            let maxWeek; //该年最大周次.1.1.在周一到周四,则为该年第一周,否则为上年最后一周.
            if((firstDay>=1&&firstDay<=4)&&(endDay==0||endDay==4||endDay==5||endDay==6))
            {
                maxWeek = 53; //1.1.和12.31.都在本年,则该年有53周,否则52周
            }else
            {
                maxWeek = 52; 
            } 
        
        if(val == "pre"){  //上一周
            this.pretweek = Number(this.weekNum)-1;
            if(this.pretweek <= 0){  //如果上一周小于0 ,年份减一,最大周减1
                    this.yearNum = Number(this.yearNum) -1;
                    this.pretweek = maxWeek - 1;
                }
            this.getTbaleData(_this.yearNum,this.pretweek)
        }else{  //下一周
            this.nextweek = Number(this.weekNum)+1;
            if(this.nextweek>maxWeek){  //如果下一周大于当年最大周 ,年份加一,从第一周开始
                    this.yearNum = Number(this.yearNum)+1;
                    this.nextweek = 1
                }
            this.getTbaleData(_this.yearNum,this.nextweek)
        }        
    },
posted @ 2019-12-18 16:42  秃头的铲屎官  Views(1291)  Comments(0Edit  收藏  举报