el-calendar实现年日历

效果图：

代码如下：

     <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 })
      }
    },