写在前面

需求：本文是vue中采用elementui 日历组件，根据不同的值设定不同日期的背景颜色块，希望我踩过的坑能给你节约开发时间。

效果：

1587720104.jpg

一、elementui日历示例

官网自定义代码：

<el-calendar>
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template
  slot="dateCell"
  slot-scope="{date, data}">
  <p :class="data.isSelected ? 'is-selected' : ''">
    {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
  </p>
</template>
</el-calendar>
<style>
.is-selected {
  color: #1989FA;
}
</style>

官网效果:

1587720551(1).jpg

二、项目业务需求，根据type值判断-1到5严重污染程度，实现不同的背景颜色：

 <el-calendar v-model="value" id="calendar">
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template
                  slot="dateCell"
                  slot-scope="{date, data}">
                  <div style="position: relative">
                    {{data.day.split('-').slice(2)[0]}}
                    <div v-for="item in calendarData">
                      <div v-if="data.day.split('-').slice(1)[0]==item.months">

                        <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1 && item.type!=-1" :class="'li-0'+item.type"  **style="width: 100%; position: absolute;top: 0;left: 0;" 备注：这是重点，第一版样式是写在css里的，没有提css**>
                          {{data.day.split('-').slice(2)[0]}}
                        </div>
                        <div v-if="(item.days).indexOf(data.day.split('-').slice(2).join('-'))!=-1 && item.type==-1" class="li-0_1'"  **style="width: 100%; position: absolute;top: 0;left: 0;background-color: #999!important;"备注：这是重点，第一版样式是写在css里的，没有提css**>
                          {{data.day.split('-').slice(2)[0]}}
                        </div>
                      </div>
                      <div v-else></div>
                    </div>
                  </div>
                  <!--{{data.day.split('-').slice(2)[0]}}-->


                </template>
              </el-calendar>

1587720865(1).jpg

  .li-00{
    background: rgb(0,228,0)!important;
    color: #000;
  }
  .li-01{
    background: rgb(255,255,0)!important;
    color: #000;
  }
  .li-02{
    background: rgb(255,126,0)!important;
    color: #000;
  }
  .li-03{
    background: rgb(255,0,0)!important;
    color: #000;
  }
  .li-04{
    background: rgb(153,0,76)!important;
    color: #000;
  }
  .li-05{
    background: rgb(126,0,35)!important;
    color: #000;
  }

最终效果

1587720104.jpg

三、总结

注意事项：

1、循环div会错位，所以要给他定位，width: 100%; position: absolute;top: 0;left: 0
2、先下班，有问题联系，看到会回复的

备注：后期持续更新不同组件。