el-calendar制作OA打卡日历

最新推荐文章于 2024-05-28 11:44:38 发布

YourMoonLight

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量795

点赞数 1

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

本文链接：https://blog.csdn.net/YourMoonLight/article/details/124665335

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

elementUI

1 篇文章 0 订阅

订阅专栏

1.vue+elementui需求如图所示：
在这里插入图片描述
2.废话不多说，直接贴代码：

<el-calendar v-model="value">
        <div slot="dateCell" slot-scope="{ data }" class="calendarItem">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(2).join("-") }}
            <!-- {{ data.isSelected ? "✔️" : "" }} -->
          </p>
          <div v-for="item in calendarData" :key="item.id">
            <!-- <div v-if="(item.months).indexOf(data.day.split('-').slice(1).join('-')) != -1"> -->
              <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-')) != -1">
                <div :class="item.status == '0'? 'green' : 'yellow'"></div>
                <el-row class="calendarContent">
                  <el-col :span="12">
                    <p>{{item.morning}}</p>
                    <p>{{item.afternoon}}</p>
                  </el-col>
                  <el-col :span="12">
                    {{item.workHours}}
                  </el-col>
                </el-row>
              </div>
            <!-- </div> -->
          </div>
        </div>
      </el-calendar>


  data() {
    return {
      calendarData: [
        {id:0,status: '1', months: ['05'],days: ['02'],afternoon: '下班打卡: 19:45',morning: '上班打卡: 8:45', workHours: '工作10小时'},
        {id:1,status: '0', months: ['05'],days: ['03'],afternoon: '下班打卡: 19:45',morning: '上班打卡: 8:45', workHours: '工作10小时'},
        {id:2,status: '1', months: ['05'],days: ['06'],afternoon: '下班打卡: 19:45',morning: '上班打卡: 8:45', workHours: '工作10小时'},
        {id:3,status: '1', months: ['05'],days: ['09'],afternoon: '下班打卡: 19:45',morning: '上班打卡: 8:45', workHours: '工作10小时'}, 
        {id:4,status: '0', months: ['05'],days: ['15'],afternoon: '下班打卡: 19:45',morning: '上班打卡: 8:45', workHours: '工作10小时'},
        {id:5,status: '0', months: ['05'],days: ['16'],afternoon: '下班打卡: 19:45',morning: '上班打卡: 8:45', workHours: '工作10小时'},
        {id:26,status: '1', months: ['05'],days: ['17'],afternoon: '下班打卡: 19:45',morning: '上班打卡: 8:45', workHours: '工作10小时'},
        {id:7,status: '1', months: ['05'],days: ['18'],afternoon: '下班打卡: 19:45',morning: '上班打卡: 8:45', workHours: '工作10小时'}   
      ],
      value: new Date()
    };
  },

.el-calendar /deep/ .el-calendar__header {
  display: none !important;
}
.el-calendar /deep/ .el-calendar-table thead th {
  height: 70px;
}
.el-calendar /deep/ .el-calendar-table .el-calendar-day {
  height: 100px;
}
.calendarItem{
  position: relative;
}
.green{
  width: 60px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 2px;
  background-color: rgb(53, 155, 53);
}
.yellow{
  width: 60px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 2px;
  background-color: rgb(241, 209, 67);
}
.calendarContent{
  height: 60px;
}
.calendarContent .el-col{
  height: 60px;
  line-height: 25px;
  font-size: 14px;
}
.calendarContent .el-col p{
  margin: 0 0 10px 0
}
.calendarContent .el-col:nth-child(2){
  line-height: 60px;
  text-align: right;
}