在vue中，实现上一周，下一周的选择（非插件）

最新推荐文章于 2025-02-19 15:03:02 发布

一朵叶子

最新推荐文章于 2025-02-19 15:03:02 发布

阅读量2.4k

点赞数 1

分类专栏： vue 文章标签： vue

vue 专栏收录该内容

4 篇文章

订阅专栏

因业务需要，需要在vue项目中做一个个性化的周表，查询了一些插件，基本上都是横向为周，纵向为时间点，改了半天均以失败告终。然后找到一篇js实现上下周的文章（https://blog.youkuaiyun.com/long5693525/article/details/51084944），作者随缘的一个人，放在vue项目中稍加改动，逻辑没有太看懂，但是效果有了，就暂时用着了

上一周，下一周

以下是代码：

<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 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))})
            }                
        },
        //上一周 
        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>

之所以没用插件，是便于开发，如果有大佬用插件做过，欢迎留下链接哦，

菜鸟学习中，若有不妥之处，欢迎各位批评指正