【vue】基于element UI周控件实现的单选周和多选周-优快云博客

本文介绍了作者仿照Element UI单选周控件，开发的单选周和多选周组件。文章详细讲解了组件的实现思路和关键点，包括当月日历生成、日历切换以及获取日期所在月份和年份的方法。同时阐述了多选周的初始化单元格颜色和周范围逻辑。最后提供了完整源码链接和交流方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前element UI上的周控件只有单选周
前段时间由于需要本人仿照element单选周的风格写了一个单选周和多选周控件

最近整理了一下代码分享给大家希望大家可以相互交流
呼呼呼呼~

组件介绍：

以每年的1月1号所在的周数为第一周
日历中增加了周数的展示
可设置禁选的周数(可配置)
多选周组件可以设置一开始周为原点的周范围(可配置)

单选周

用法

    <p>单选周：<week-pick v-model="dateNow" @change="changeDate" :weekOptions="weekOptions"></week-pick></p>
复制代码

单选周相关Api

     // 默认值 [开始值,结算值] 或者 []
     dateNow:["2019-02-25", "2019-03-03"],
     // 配置禁选周
      weekOptions: {
        disabledWeeks: {
          '2019':[10,11,12]   //禁用 2019年 第10,11,12 周  
        },
      }
复制代码

要点一当月所在的日历生成

单选周的主要突破点在于6排8列的日历数组的实现要绘制出一个月的日历表我们需要知道：

当月第一天是星期几
上个月有多少天
本月有多少天

以上可以推算出当前月中上月和下月的日期

主要实现代码：

  rows() {
      const date = new Date(this.year, this.month, 1)  // 本月一号日期
      let day = this.getFirstDayOfMonth(date)  // 本月第一天的星期
      day = (day === 0 ? 7 : day)
      const dateCountOfMonth = this.getDayCountOfMonth(date.getFullYear(), date.getMonth()) // 本月的天数
      const dateCountOfLastMonth = this.getDayCountOfPreMonth(date.getFullYear(), (date.getMonth() === 0 ? 11 : date.getMonth() - 1))  // 上个月的天数
      const datesArry = this.tableRows
      let count = 1
      // 获取当前月需要渲染的每个单元格的日期
      for (let i = 0; i < 6; i++) {
        const row = datesArry[i]
        for (let j = 0; j < 7; j++) {
          let cell = row[j]
          if (!cell) {
            //初始化cell
            cell = { row: i, column: j, type: 'normal', isToday: false, dateString: null, limit: false, week: null,year:null }
          }
          cell.type = 'normal'
          // 获取每个cell对应的日期
          if (i >= 0 && i <= 1) {
            if (j + i * 7 >= (day - 1)) {
              ce