vue实现上一周，下一周的选择

原文链接：https://blog.csdn.net/yjy528/article/details/89327381

<template>
   <div class="table_box">
      <div>
          <el-button @click="lastclick">上一周</el-button>
          <span>{{todayDate}}</span>
          <el-button @click="nextclick">下一周</el-button>
      </div>    
      <div class="table_header">
          <div class="week_one"></div>
          <div class="weekday" v-for="(item,index) in weekDayArr" :key="index">
               <span>{{item.adate}}</span>
          </div>
      </div>
   </div>
</template>
<script>
import $ from "jQuery"
 
export default {
    data(){
        return {            
            currentFirstDate:"",
            clen:7,
            todayDate:"",
            weekDayArr:[]           
        }
    },
    created() {
        this.todayDate=this.formatDate(new Date())
        this.setDate(new Date())
    },
    methods: {
        // 日期格式处理
        formatDate(date){
          var year = date.getFullYear()+'年';             
          var month = (date.getMonth()+1)+'月';
          var day = date.getDate()+'日';
          var week = '('+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+')';  
          return month+day+' '+week;
        },  
        //
        addDate(date,n){        
          date.setDate(date.getDate()+n);        
          return date;
        },  
        //
        setDate(date){           
            var week = date.getDay()-1;
            date = this.addDate(date,week*-1);
            this.currentFirstDate = new Date(date);
            for(var i = 0;i<this.clen; i++){     
                this.weekDayArr.push({"adate":this.formatDate(i==0 ? date : this.addDate(date,1))})
                //只有日期
                //this.weekDayArr.push(this.formatDate(i==0 ? date : this.addDate(date,1)))
            }                
        },
        //上一周 
        lastclick(){
            this.weekDayArr=[]
            this.setDate(this.addDate(this.currentFirstDate,-7));   
        },
        //下一周
        nextclick(){ 
            this.weekDayArr=[]                
            this.setDate(this.addDate(this.currentFirstDate,7));
        },
    },
}
</script>
<style lang="">
.table_header{ display:flex; justify-content: center; color:#8e8e8e; background: #e9f0fe; border-top:1px solid #f5f4f7; border-right:1px solid #f5f4f7;}
.week_one{ text-align: center; line-height: 50px; border-bottom:1px solid #f5f4f7; border-left:1px solid #f5f4f7; background: #e9f0fe;  width:200px; }
.weekday{ flex:1; text-align: center; line-height: 48px; border-bottom:1px solid #f5f4f7; border-left:1px solid #f5f4f7; background: #e9f0fe; }
</style>