基於element-ui的日曆顯示當月考勤狀況

前言：element-ui 日曆組件calendar 自定義使用，作一個顯示當月考勤狀況的功能。

官方文檔：https://element.eleme.cn/#/zh-CN/component/calendar

效果圖：

　　

 

 準備工做：

　　element-ui的版本最少是2.8.2，因爲以前我安裝的版本是2.4.2版本，我看的文檔是最新的版本，拿日曆插件測試了好久一直沒有顯示出來，而後我將element的版本升級，才發現vue項目打不開，頁面卡死。找了不少資料，才發現vue版本最低也得2.5.16，因此又將vue升級，最後測試時，發現2.8.2日曆插件是有問題的，時間對應不許確，又將element升級到2.9.2才解決（不敢將element版本升級過高，怕之前寫的出現bug）

　　element-ui版本是2.9.2，vue版本是2.5.16

代碼：

　　因爲後臺返回的參數是當前一個正月的參數，有多少天就返回多少條，看返回的參數：

　　

 

 　　number表明是一天打卡的次數，0表示當天打卡次數爲零，1表示打卡一次，2表示打卡正常。

<el-calendar id="calendar">
     <template slot="dateCell" slot-scope="{date, data}">
            <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
            <div v-if="data.day.split('-').slice(1)[0] == value" > //判斷顯示當前頁，value是顯示當前月份
               <p v-if="handleSelected(data.day) == 0 ">缺勤兩次 </p>
               <p v-if="handleSelected(data.day) == 1 ">缺勤一次 </p>
               <p v-if="handleSelected(data.day) == 2 ">打卡正常 </p>
             </div>
      </template>
</el-calendar>

　

handleSelected(day) { let flag = 0; //默認顯示爲0 this.attendanceDetailsData.forEach(item => { //this.attendanceDetailsData是後臺返回的數據
　　if (item.number== day) { //判斷顯示數據
　　　　flag = item.number;
　　　　　　return 
　　　　} 
　　})

　　 return flag 
}

因爲後臺返回給個人是整個月的，因此未到的時間是返回0次的，也就是缺勤兩次。

一、日曆的中的日期是字符串，因此數據格式裏的月份和日也是字符串；也能夠都轉換成int型

二、能夠根據本身數據格式判斷顯示式。這裏我只是根據個人數據來判斷的。

 

若有問題，歡迎交流~！