element日历根据条件修改背景色

<template>

  <div style="margin-top: 10px">

    <el-row>

      <el-col :span="24">

        <el-calendar v-model="dateValue">

          <template #date-cell="{ data }">

            <div @click="selectedDate(data)" style="position: relative; height: 100%">

              <div class="select" v-for="(item, index) in dateList" :key="index" style="

                  width: 100%;

                  height: 100%;

                  position: absolute;

                  top: 0;

                  left: 0;

                ">

                <div v-if="data.day == item.MonthDays" style="height: 100%">

                  <div style="height: 100%" :class="item.TotalCounts > 2 ? 'backYellow' : 'backGreen'">

                    <!-- <span style="position: absolute ;color: black;">{{ getDate(data.day) }}</span> -->

                    <div>

                      <div style="

                          float: right;

                          display: flex;

                          flex-direction: column;

                          font-size: 12px;

                        " class="card">

                        <span>预约:{{ item.YYCounts }}&nbsp;&nbsp;</span>

                        <span>审批:{{ item.SHCounts }}&nbsp;&nbsp;</span>

                        <span>通过:{{ item.TGCounts }}&nbsp;&nbsp;</span>

                      </div>

                    </div>

                  </div>

                </div>

                <div v-else>

                  <!-- <span style="position: absolute ;color: black;">{{ getDate(data.day) }}</span> -->

                </div>

              </div>

              <div style="color: black;position: relative;">{{ getDate(data.day) }}</div>

            </div>

          </template>

        </el-calendar>

      </el-col>

    </el-row>

  </div>

</template>

<script setup name="Calendar">

import moment from "moment";

import { defineComponent, ref, watch } from "vue";

import router from "@/router";

const dateList = ref([

  {

    MonthCounts: 9,

    MonthDays: "2023-11-01",

    SHCounts: 0,

    TGCounts: 0,

    TotalCounts: 0,

    WeekSHCounts: 0,

    WeekTGCounts: 0,

    WeekTotalCounts: 4,

    WeekYYCounts: 4,

    YYCounts: 0,

  },

  {

    MonthCounts: 9,

    MonthDays: "2023-11-04",

    SHCounts: 0,

    TGCounts: 0,

    TotalCounts: 1,

    WeekSHCounts: 0,

    WeekTGCounts: 0,

    WeekTotalCounts: 0,

    WeekYYCounts: 0,

    YYCounts: 1,

  },

  {

    MonthCounts: 9,

    MonthDays: "2023-11-05",

    SHCounts: 0,

    TGCounts: 0,

    TotalCounts: 4,

    WeekSHCounts: 0,

    WeekTGCounts: 0,

    WeekTotalCounts: 0,

    WeekYYCounts: 0,

    YYCounts: 4,

  },

  {

    MonthCounts: 9,

    MonthDays: "2023-11-06",

    SHCounts: 0,

    TGCounts: 0,

    TotalCounts: 4,

    WeekSHCounts: 0,

    WeekTGCounts: 0,

    WeekTotalCounts: 0,

    WeekYYCounts: 0,

    YYCounts: 4,

  },

  {

    MonthCounts: 9,

    MonthDays: "2023-11-07",

    SHCounts: 0,

    TGCounts: 0,

    TotalCounts: 1,

    WeekSHCounts: 0,

    WeekTGCounts: 0,

    WeekTotalCounts: 0,

    WeekYYCounts: 0,

    YYCounts: 1,

  },

  {

    MonthCounts: 9,

    MonthDays: "2023-11-15",

    SHCounts: 0,

    TGCounts: 0,

    TotalCounts: 2,

    WeekSHCounts: 0,

    WeekTGCounts: 0,

    WeekTotalCounts: 0,

    WeekYYCounts: 0,

    YYCounts: 2,

  },

  {

    MonthCounts: 9,

    MonthDays: "2023-11-16",

    SHCounts: 0,

    TGCounts: 0,

    TotalCounts: 2,

    WeekSHCounts: 0,

    WeekTGCounts: 0,

    WeekTotalCounts: 0,

    WeekYYCounts: 0,

    YYCounts: 2,

  },

  {},

]);

const dateValue = ref(); //当前月份

watch(

  () => dateValue.value,

  (val) => { }

);

//转换为日期

function getDate(day) {

  return moment(day).format("DD");

}

//点击事件

function selectedDate(data) { }

</script>

<style lang="scss" scoped>

.card {

  position: relative;

  background: #86b750 !important;

  border: 2px solid #86b750 !important;

  z-index: 2;

  right: 0px;

}

.backYellow {

  height: 100%;

  width: 100%;

  color: white;

  background: #ffeb3b;

  border-radius: 5px;

}

.backGreen {

  width: 100%;

  color: white;

  background: #88ea91;

  border-radius: 5px;

}

.stopCilck {

  pointer-events: none;

  background: #e7e3e3;

  color: black;

}

// 今日日期样式

:deep(.el-calendar-table td.is-today .card-calendar-text) {

  // color: red;#409EFF

  color: unset;

}

//悬浮样式

:deep(.el-calendar-table .el-calendar-day:hover) {

  cursor: pointer;

  background-color: #409eff4f;

}

//选中样式

:deep(.el-calendar-table td.is-selected .el-calendar-day .select) {

  color: #fff !important;

  background-color: #409eff !important;

  padding: 0px;

}

:deep(.is-selected .el-calendar-day .backGreen) {

  color: #fff !important;

  background-color: #409eff !important;

  padding: 8px;

  .card {

    position: relative;

    background: #86b750 !important;

    z-index: 99;

  }

}

:deep(.is-selected .el-calendar-day .backYellow) {

  color: #fff !important;

  background-color: #409eff !important;

  padding: 8px;

  .card {

    position: relative;

    background: #86b750 !important;

    z-index: 99;

  }

}

// 表头样式

:deep(.el-calendar-table thead) {

  background-color: #d0e9b4;

}

:deep(.el-calendar-table thead th) {

  border-right: 1px solid white;

  padding: 12px 0;

  color: #001528;

  font-weight: 600;

}

//上月

//下月

:deep(.el-calendar-table:not(.is-range) td.next .el-calendar-day .backGreen) {

  background: #e7e3e3 !important;

}

//周六

//周六表头

:deep(.el-calendar-table thead th:first-child) {

  background: #d0e9b4;

}

//周六被默认选择

:deep(.el-calendar-table tr td:first-child) {

  .el-calendar-day {

    background: #e7e3e3 !important;

    .select {

      background: #e7e3e3 !important;

    }

  }

}

//周六背景

:deep(.el-calendar-table tr td:first-child) {

  pointer-events: none !important;

  background: #e7e3e3 !important;

  color: black !important;

  //周六有审核数据背景

  .backYellow {

    pointer-events: none !important;

    background: #e7e3e3 !important;

    color: white !important;

  }

  .backGreen {

    pointer-events: none !important;

    background: #e7e3e3 !important;

    color: white !important;

  }

}

//周日

//周天表头

:deep(.el-calendar-table thead th:last-child) {

  background: #d0e9b4;

}

//周天被默认选中

:deep(.el-calendar-table tr td:last-child) {

  .el-calendar-day {

    background: #e7e3e3 !important;

    .select {

      background: #e7e3e3 !important;

    }

  }

}

//周天有审核数据背景

:deep(.el-calendar-table tr td:last-child) {

  pointer-events: none !important;

  background: #e7e3e3 !important;

  color: black !important;

  .backGreen {

    pointer-events: none !important;

    background: #e7e3e3 !important;

    color: white !important;

  }

  .backYellow {

    pointer-events: none !important;

    background: #e7e3e3 !important;

    color: white !important;

  }

  .is-selected {

    background: #e7e3e3 !important;

  }

}

//非本月的禁止点击

:deep(.el-calendar-table) {

  width: 100%;

  height: 100%;

  &:not(.is-range) {

    //使不是本月的日期不可点击，不会跳转到其他月份

    td.next {

      pointer-events: none;

      background: #e7e3e3;

      color: black;

    }

    td.prev {

      pointer-events: none;

      background: #e7e3e3;

      color: black;

    }

  }

}

</style>