页面渲染代码
```
<div class="Calendarbox">
<el-calendar ref="calendar" v-mobel="value">
<!-- <template v-slot:header> this父组件，把这段template放在子组件的header插槽里-->
<!-- 作用域插槽. -->
<template #header="{ date }">
<div class="leftbutton">
<el-button size="small" @click="selectDate('prev-year')">
<span>上一年
<el-button size="small" @click="selectDate('prev-month')">
<span>上月
<div class="middlebutton">
<el-button size="small" @click="selectDate('today')">
{{ date }}
<div class="rightbutton">
<el-button size="small" @click="selectDate('next-month')">
下月
<el-button size="small" @click="selectDate('next-year')">
下一年
<!-- 通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。 -->
<template #date-cell="{ data }">
<div style="display:flex;flex-direction:row;">
{{ data.day.split("-").slice(2).join("-") }}
<div v-for="iin kaoqin">
<div v-if="data.day.split('-').slice(2)==i.day">
{{ i.state }}
<script setup>
/**
* 组件 - 考勤日历（动态加载数据）
*/
import {ref }from 'vue';
//别名.(方法)
const kaoqin = [
{
month:'07',
day:"13",
state: ["正常", "正常"]
},
{
month:'07',
day:"18",
state: ["正常", "正常"]
},
]
const calendar =ref()
const selectDate = (val) => {
calendar.value.selectDate(val)
}
```
