el-calendar实现年日历

初心w50t2

已于 2024-07-29 11:01:29 修改

阅读量372

点赞数 1

分类专栏： VUE 文章标签： vue.js elementui

于 2024-07-29 11:00:32 首次发布

本文链接：https://blog.csdn.net/qq_41910413/article/details/140765889

版权

VUE 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
代码如下：

     <el-row>
        <el-col
          v-for="(item, index) in dateList"
          :key="'day' + index"
          :span="6"
        >
          <el-calendar v-model="item.value">
            <template slot="dateCell" slot-scope="{ data }">
              <div @click="selectDate(data)">
                {{ formatDate(data.day) ? '休' : data.day.split('-')[2] }}
              </div>
            </template>
          </el-calendar>
        </el-col>
      </el-row>

初始化日历数据：

    initCalendar() {
      this.dateList = []
      for (let month = 1; month <= 12; month++) {
        const monthStr = month < 10 ? '0' + month : month
        const value = `${this.year}-${monthStr}-01`
        this.dateList.push({ value })
      }
    },