vue 一周日历展示，上一周下一周展示。

Vue代码展示

<template>
   <div class="table_box">
      <div>

          <span>{{todayDate}}</span>

      </div>
      <div class="timeall">
        <i class="el-icon-arrow-left lastbt" @click="lastclick"></i>
        <div class="table_header">
            <div class="weekday"  :class="item.adate==todayDate?'finish':'test'" v-for="(item,index) in weekDayArr" :key="index">
                 <span @click="getAdate(item)">{{item.adate.slice(5,9)}}</span>
            </div>
        </div>
        <div class="table_header">

            <div class="weekday" v-for="(item,index) in weekAll" :key="index">
                 <span>{{item}}</span>
            </div>
        </div>
        <i class="el-icon-arrow-right nextbt" @click="nextclick"></i>
      </div>

   </div>
</template>
<script>

export default {
    data(){
        return {
            currentFirstDate:"",
            clen:7,
            todayDate:"",
            weekDayArr:[],
            weekAll: [
              '周一','周二','周三','周四','周五','周六','周日',
            ]
        }
    },
    created() {
        this.todayDate=this.formatDate(new Date())
        this.setDate(new Date())
    },
    methods: {
        // 日期格式处理
        formatDate(date){
          console.log(date)
          var year = date.getFullYear() + '-'
          var month = (date.getMonth()+1) + '-';
          var day = date.getDate();
          return year+month+day;
        },
        //
        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))})
            }
        },
        //上一周
        lastclick(){
            this.weekDayArr=[]
            this.setDate(this.addDate(this.currentFirstDate,-7));
        },
        //下一周
        nextclick(){
            this.weekDayArr=[]
            this.setDate(this.addDate(this.currentFirstDate,7));
        },
        getAdate (item) {
          console.log(item)
        }
    },
}
</script>
<style lang="">
  .timeall{
    position: relative;
    width: 330px;
  }
  .lastbt,.nextbt{
    position: absolute;
    top:18px;
  }
  .lastbt{
    left: -7px;
  }
  .nextbt{
    right: -7px;
  }
.table_header{ display:flex; justify-content: center; color:#8e8e8e;}
.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: 25px; }
.finish {
  background:#8ACBAD;
  color:#fff !important;
}
</style>

效果图