用el-calendar來顯示員工的考勤數據是再好不過的了，我們需要實現以下目標：
1、可以正確顯示員工每天的考勤
2、全天打卡、半天打卡、遲到早退等需要在日歷控件上以不同的顏色來表示
3、點擊el-calendar中的每一天時可以彈出當天打卡的詳細時間
網上找了很多資料，最后發現還是用遮罩層實現最方便最美觀，CSS高手可以美化下遮罩層，讓它上下左右居中，讓它顯示成一個圓形，我這顯示的是個方塊。
后台查詢某個員工時返回的考勤數據格式如下，
kaoqin:[{"天":"01","日期":"2020-04-01 08:13:50;2020-04-01 18:09:11;","結果":"success"},{"天":"02","日期":"2020-04-02 07:36:58;2020-04-02 18:06:56;","結果":"success"}]
一、日歷控件的顯示
1、第三行的CSS主要是讓顯示的day上下左右居中，以適應用戶不同的縮放需求
2、第八行主要是為了讓顯示的tooltip提示數據換行，看上去更美觀
3、10、11、12行是根據判斷的條件來顯示不同的遮罩層，主要是顏色不同。
1 <el-calendar v-model="value1"> 2 <template slot="dateCell" slot-scope="{date, data}"> 3 <div style="position:relative;text-align:center;height:100%;align-items:center;display:flex;justify-content: center; "> 4 {{data.day.split('-').slice(2)[0]}} 5 <div v-for="(item,index) in kaoqin" :key="index+1"> 6 <div v-if="(item.天).indexOf(data.day)!=-1"> 7 <el-tooltip placement="top"> 8 <div slot="content" v-html="ToHtml(item.日期)"></div> 9 <!-- <el-button :type="item.結果" style="margin-top:5px;">{{ToJieGuo(item.結果)}}</el-button> --> 10 <div class="box-green" v-if="item.結果==='success'"></div> 11 <div class="box-yello" v-if="item.結果==='warning'"></div> 12 <div class="box-white" v-if="item.結果==='default'"></div> 13 </el-tooltip> 14 </div> 15 </div> 16 </div> 17 </template> 18 </el-calendar>
1 //把考勤結果轉換成html格式的，實現多個數據的換行 2 ToHtml(v){ 3 return v.split(';').join("<br/>"); 4 },
二、遮罩層的實現，百度的，效果還是非常不錯的，有興趣的可以減化一下寫法，我是直接復制了兩份。
1 .box-green{ 2 position:absolute; 3 top:0; 4 bottom:0; 5 left:0; 6 right:0; 7 background-color: #67C23A; 8 opacity:0.6; 9 padding: 0; 10 border-radius: 5%; 11 } 12 13 .box-yello{ 14 position:absolute; 15 top:0; 16 bottom:0; 17 left:0; 18 right:0; 19 background-color: #E6A23C; 20 opacity:0.6; 21 padding: 0; 22 border-radius: 5%; 23 } 24 .box-white{ 25 position:absolute; 26 top:0; 27 bottom:0; 28 left:0; 29 right:0; 30 background-color: #FFFFFF; 31 opacity:0.6; 32 padding: 0; 33 border-radius: 5%; 34 }
三、不同尺寸下的顯示效果（沒有半天打卡，沒有退到早退，都顯示的綠色）
