element-plus日历(Calendar)动态渲染,页面为何不显示获取到的值？

<template>
  <el-calendar ref="calendar">
    <template #header="{ date }">
      <span style="font-size: 18px;color:#0a519b;font-weight: bold">工时填报备忘录</span>
      <span style="font-size: 25px;color:#0a519b;font-weight: bold">{{ date }}</span>
      <el-button-group >
        <div style="margin-top: 10px;">
          <el-button size="small" @click="selectDate('prev-month')" style="font-size: 15px">
            上个月
          </el-button>
          <el-button size="small" @click="selectDate('today')" style="font-size: 15px">今天</el-button>
          <el-button size="small" @click="selectDate('next-month')" style="font-size: 15px">
            下个月
          </el-button>
        </div>
      </el-button-group>
    </template>
    <template #date-cell="{ data }">
      <el-row :class="data.isSelected ? 'is-selected' : 'sds'">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
      </el-row>
      <div v-for="(item,index) in textContent(data.day)" :key="index" style="padding-top: 15px">
        <e-row>
          <el-col class="center">
            <el-tag type="warning" class="tag">
              <el-row v-if="item.reportType === ''" >
                <el-col :span="17" class="tag">
                  <span>出勤状态</span>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="6" class="tag2">
                  <span>{{item.reportType}}</span>
                </el-col>
              </el-row>
              <el-row v-else>
                <el-col :span="17" class="tag">
                  <span>出勤状态</span>
                </el-col>
                <el-col :span="1"></el-col>
                <el-col :span="6" class="tag2">
                  <span>{{item.reportType}}</span>
                </el-col>
              </el-row>
            </el-tag>
          </el-col>
        </e-row>
        <el-row
          style="margin-top: 10px"
          class="hours"
          v-if="item.workingHours && item.overtimeWorkingHours === 0"
        >
          <el-col :span="11" class="center">
            <span style="font-size: 12px">正常工时</span><span class="center2" style="">0</span></el-col>
          <el-col :span="2" class="center">|</el-col>
          <el-col :span="11" class="center">
            <span style="font-size: 12px">加班工时</span><span class="center2">0</span></el-col>
        </el-row>
        <el-row v-else style="margin-top: 10px" class="hours" >
          <el-col :span="11" class="center">
            <span style="font-size: 12px">正常工时</span><span class="center2" style="">{{item.workingHours }}</span></el-col>
          <el-col :span="2" class="center">|</el-col>
          <el-col :span="11" class="center">
            <span style="font-size: 12px">加班工时</span><span class="center2">{{ item.overtimeWorkingHours }}</span></el-col>
        </el-row>
      </div>

    </template>


  </el-calendar>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import {getHoursData} from "@/api/hours/hoursCalendar";



const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value?.selectDate(val)
}

//处理日期获取后台数据动态渲染上去
const textContent = (date) => {

  //当前date是拿到上面日历组件当前的日期值 根据该值去筛选测试数据找到对应各个日期下对应的数据return出去
  return getHoursData().then(res=>{
    return res.list.filter((item)=>{
      if(date == item.reportDate){
        console.log("这是获取到的相同日期1"+item.reportDate);
        console.log("这是获取到的相同日期2"+date);
        console.log("这是查到的相同的值"+JSON.stringify(item))
        return date === item.reportDate;
      }else {
        console.log("这是获取到的不日期1"+item.reportDate);
        console.log("这是获取到的不日期2"+date);
        console.log("这是查到的不相同的值"+JSON.stringify(item))
      }

    })
  })
};

</script>

<style scoped >
:deep .el-calendar-table thead th {
  color: #0c63be;
  font-weight: bold;
  font-size: 15px;
}
:deep .el-calendar-table .el-calendar-day:hover {
  background-color: #3c89da;
  font-size: 20px;
  color: white;
}
:deep .el-calendar-table .el-calendar-day{
  height: 150px;
  font-size: 16px;
  font-weight: 600;
}
.aaa .is-selected .dataStyle {
  color: #ffab11;
}
.aaa .prev .dataStyle {
  color: #c4c5c8;
}
.aaa .next .dataStyle {
  color: #c4c5c8;
}
:deep .el-calendar {
  --el-calendar-cell-width: 130px;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.center2 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffab11;
  margin-left: 5px;
  font-size: 15px;
}
</style>