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

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

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

效果图：

参考链接：https://blog.youkuaiyun.com/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>