关于element的日历组件改造为考勤页面

<el-calendar :first-day-of-week="7">
                  <template slot="dateCell" slot-scope="{ data }">
                    <p>{{ data.day.split("-").slice(2).join("-") }}<br/></p>
                  </template>
                </el-calendar>

得到的效果为
然后我想得到的效果是员工在出勤的那天显示√，在缺勤的那天显示红色的×
但是在elemen-ui中并未提供数据输入接口，其中data是为了显示日历的
我们只需要在组件渲染每个日期的前，先判断一下是否有关于这一天的考勤

 <el-calendar :first-day-of-week="7">
                  <template slot="dateCell" slot-scope="{ data }">
                    <p>{{ data.day.split("-").slice(2).join("-") }}<br/></p>
                    <div
                      v-for="(item, index) in calendarData"
                      :key="index"
                    >
                      <div v-if="data.day == item.day">
                          {{item.status}}
                      </div>
                    </div>
                  </template>
                </el-calendar>

在下面的数据中放入

calendarData: [
        { day: "2021-04-03",status:"pass", },
        { day: "2021-04-06",status:"unpass", },
      ],

最后的得到的效果

之后把pass和unpass换做自己需要的效果就可以了。
写的不好，大佬勿喷。