vue中集成 <el-calendar>日历控件，显示数据的状况

vue中集成 <el-calendar>日历控件，显示数据的状况。每个日期上显示颜色方框。

在  <el-calendar> 控件的 <template> 中处理具体的颜色显示，使用 v-if 函数调用处理参数，其中添加 slot-scope="{date, data}" 可获取日期和数据。

效果图：

 

 

参考链接：https://blog.csdn.net/weixin_56718509/article/details/131699291

<template><!--数据日历-->
  <div>
    <el-calendar v-model="value" @input="handleCalendarChange">
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <div v-if="data.type != 'current-month'"><!--非当前月日期仅显示数字-->
          <div  style="width: 45px;height: 25px;margin-top: 5px;text-align: center;color: #d4cfcf;padding-top: 2px;">
            {{ data.day.split('-').slice(2).join('-') }}</div>
        </div>
        <div v-if="data.type == 'current-month' && handelData(data)">
          <div :class="(data.overCss == null?'grey':data.overCss)" style="width: 45px;height: 25px;border-radius: 10px;margin-top: 5px;text-align: center;color: white;padding-top: 2px;">
            {{ data.day.split('-').slice(2).join('-') }}</div>
        </div>
      </template>
    </el-calendar>

    <el-row :gutter="20">
      <el-col :span="8"><div class="tip-foot"><el-row><el-col :span="12">正常</el-col><el-col :span="12" class="green tip-color"></el-col></el-row></div></el-col>
      <el-col :span="8"><div class="tip-foot"><el-row><el-col :span="12">超标</el-col><el-col :span="12" class="red tip-color"></el-col></el-row></div></el-col>
      <el-col :span="8"><div class="tip-foot"><el-row><el-col :span="12">无数据</el-col><el-col :span="12" class="grey tip-color"></el-col></el-row></div></el-col>
    </el-row>

  </div>
</template>

<script>

    export default {
      name: "dataCalendar",
      data() {
        return {
          value: new Date(),
          showList:[],
          monitorTime:new Date()
        }
      },
      created() {
          getDataList();
      },
      methods: {
        //查询
        getDataList(){
          //查询数据赋值给 this.showList
		  //本例中格式 this.showList=[{monitorTime:'2024-06-04 00:00:00',dataFlag:'1',data:5}]
		  
        },
        //日期更改
        handleCalendarChange(value){
          this.monitorTime = this.formatDateString(value);
          this.getDataList();
        },
        formatDateString(date) {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          return `${year}-${month}-${day} 00:00:00`;
        },
        //处理数据
        handelData(e) {
          for (let i = 0; i < this.showList.length; i++) {
            if (this.showList[i].monitorTime.substring(0, 10) == e.day + '') {
              if(this.showList[i].data == null){//如果没有数据则不填充样式，css中处理成灰色
                  continue;
                }else if (this.showList[i].dataFlag == '1') {
                  e.overCss = 'red';
                } else if (this.showList[i].dataFlag == '0') {
                  e.overCss = 'green';
                }
            }
          }
          return true;
        },
        

      }
    }
</script>

<style lang="scss" scoped>
  .green{
    background-color: green;
  }
  .red{
    background-color: #b81e1e;
  }
  .grey{
    background-color: darkgrey;
  }
  .tip-foot{
    width: 60%;
    text-align: center;
    margin-left: 20%;
  }

  .tip-color{
    width: 30px;
    height: 20px;
    border-radius: 5px;
  }

</style>


<style type="text/css">

</style>