element 日历组件自定义内容

效果图：

 <el-calendar id="calendar">
               <!-- 这里使用的是 2.5 slot 语法-->
               <template
                   slot="dateCell"
                   slot-scope="{date, data}">
                 <!--自定义内容-->
                 <div @click="calendarOnClick(data)">
                   <div class="calendar-day" style="text-align: center">
                     <div >
                       <span class="everyDay">{{ data.day.split('-').slice(2).join('-') }}</span>
                     </div>
                     <div v-for="item in brightDate">
                       <div v-if="(item.yysj).indexOf(data.day) != -1" style="width: 25px;height: 25px" class="yy_statue"></div>
                       <div v-if="(item.yysj).indexOf(data.day) != -1" style="color: red">{{item.num}}</div>
                     </div>
                   </div>
                 </div>
               </template>
             </el-calendar>

  computed: {
    // 时间高亮的数组
    brightDate () {
      let ary = []
      ary=this.ddjy.dyjy_tygyy_calendar_group
      console.log(ary);
      return ary
    }
  },
    methods: {
 //点击日期块
    calendarOnClick(e) {
      let date=''
      if(e.day){
        date=e.day
        console.log(date);
      }
      this.$emit('calendarhandle',date)
    },
    }

data:{
 value: new Date(),
}

后台给的数据结构：

不懂请留言