vue+element使用el-calendar日历自定义基本内容获取点击事件

需求：点击日历上的日期 更新下面的数据
需求是可以用官网上的基本el-calendar，但是没有点击之后获取日期做其他事情的方法。。。
所以只能自己自定义一个了，做完的图如下图，默认选择当天+1天

第一步：HTML的内容

 <el-calendar
      v-model="calendar.productDate"
      :style="!showCalendar ? 'pointer-events: none; color: #eee' : ''"
    >
    //showCalendar ：控制日历置灰
      <!-- <template > -->
      <div
        slot="dateCell"
        slot-scope="{ data }"
        @click="allcalendar(data)"
        class="temp"
      >
      //is-selected-1:为自定义的类名
        <p :class="data.isSelected ? 'is-selected-1' : ''">
          {{ data.day.split("-").slice(2).join("-") }}
        </p>
      </div>
      <!-- </template> -->
    </el-calendar>

methods:{
// 日历触发事件
    allcalendar(data) {
      const loading = this.$loading({
        // lock: true,  //加上这个 页面点击日历的时候会莫名其妙抖动一下 因为我界面上有滚动条，所以我注释了
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setTimeout(() => {
        this.calendar.productDate = data.day; //取到你需要的日期data.day
        //需要用到这日期做啥事，比如做为调接口的参数
        loading.close();
      }, 500);
    },
}

.el-calendar {
  text-align: center;
}
.temp {
  padding: 20px;
}
.is-selected-1 {
  width: 100%;
  height: 100%;
}