日历去年上个月下个月明年带图标

<template>
  <div class="hello">
    <div class="contentBtn">
    <div @click="handleYL" class="checkYL point" title="上一年">
      上一年
    </div>

    <div @click="handleML" class="checkML r point" title="上个月">
      上个月
    </div>
    <div @click="handleTo" class="checkTo r point" title="今天">
      今天
    </div>

    <div @click="handleMN" class="checkMN r point" title="下个月">
      下个月
    </div>
    <div @click="handleYN" class="checkYN r point" title="下一年">
      下一年
    </div>
  </div>
    <el-calendar v-model="value"  ref="calendar">
      <template slot="dateCell" slot-scope="{date, data}">
        <div style="width:100%;" class="datacontent">
          <input type="checkbox" :checked="gender(data)" @change="checkChange(data)" :id="data.day" :ref="data.day">
          <i class="el-icon-edit" v-if="hu(data)" style="color: blueviolet;"></i>
          <div> {{ data.day.split("-").pop() }}</div>
        </div>
      </template>
</el-calendar>
 </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      value: new Date(),
      dataList: ["", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      checkList:[],
    }
  },
  methods:{
    handleYL(){
     let d = new Date(this.value);
      this.value =
        d.getFullYear() - 1 + "-" + this.handleTime(d.getMonth() + 1);
    },
      // 处理时间
    handleTime(s) {
      return s < 10 ? "0" + s : s;
    },
    handleML(){
      this.$refs.calendar.$children[0].$children[0].$el.click()
    },
    handleTo(){
      this.$refs.calendar.$children[0].$children[1].$el.click()
      
    },
    handleYN(){
     let d = new Date(this.value);
      this.value =
       d.getFullYear() + 1 + "-" + this.handleTime(d.getMonth() + 1);
    },
    handleMN(){
     this.$refs.calendar.$children[0].$children[2].$el.click()
    },
    checkChange(data){
      // let day = day
      const self = this;
      console.log('列表点击事件');
      console.log('data',data);
      if( self.checkList.some(item => item.day === data.day)){
        console.log('已经选中过要去掉了');
        self.checkList.forEach((item, index) => {
         if (item.day === data.day) {
          self.checkList.splice(index, 1);
         }
       });
        console.log('checkList',self.checkList); 
      }else{
      console.log('未选中过，要添加进去');
        self.checkList.push({
          day:data.day,
          checked:true
        })
        console.log('checkList',self.checkList); 
      }
    },
    gender(data){
     return this.checkList.some(item => item === data.day)
    },
    hu(data){
      let num = Number(data.day.split("-").pop())
      return num%2===0;
    },
  created(){
  }
}
</script>

<style scoped>
.hello{
  position: relative;
}
.contentBtn{
  display: flex;
  position: absolute;
  top: 17px;
}
.r{
  margin-left: 50px;
}
.el-calendar__header{
  justify-content: end !important;
}
.point{
  cursor: pointer;
}
.datacontent{
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
}
</style>

效果图