vue日历背景图/calendar,elementui中 el-calendar自定义日历背景颜色

写在前面

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

效果：

1587720104.jpg

一、elementui日历示例

官网自定义代码：

官网效果:

1587720551(1).jpg

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

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、先下班，有问题联系，看到会回复的

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