页面渲染代码

```

  <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)

}

```