element Calendar日历上月、今天、下月点击事件

<template>
	<el-calendar v-model="value">
    <template
        slot="dateCell"
        slot-scope="{date, data}">
        <p :class="data.isSelected ? 'is-selected' : ''">
          {{ data.day.split('-').slice(2).join('-') }}

          <!-- {{ data.isSelected ? '✔️' : ''}} -->
          <div v-for="(item, index) in formatSchedule(data)" :key="index">
            <!-- {{item.result}} -->
            <div v-for="(itemx,i) in item.list" @click="click(itemx)">
              {{itemx}} - demo
            </div>
          </div>

        </p>
      </template>
	</el-calendar>
</template>
<script>
export default {
    computed: {
        //将返回数据里的时间与日历控件里的时间匹配，将数据回显在对应的位置上
        //数据的时间格式： riqi:"2021-06-05" --- yyyy-MM-dd；
        //如果后端返回的时间不是yyyy-MM-dd，要转格式再匹配
        formatSchedule() {
          return (data) => {
            // data {isSelected: false, type: 'prev-month', day: '2023-07-31'}

            return this.tradeData.filter(f=>f.riqi.includes(data.day))
          };
        },
      },
    data() {
      return {
        value: '2023-08-03' ,//new Date()
        tradeData:[
          {
            result: "正常",
            riqi: "2023-08-02",
            list:[1,2,3,4]
          }
        ]
      }
    },
	created() {
		console.log(new Date())
    this.$nextTick(() => {

      // 点击前一个月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", e => {
        console.log(this.value);
      })
      //点击下一个月
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        console.log(this.value);
      });

      //点击今天
      let todayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      todayBtn.addEventListener("click", () => {
        console.log(this.value);
      });

    })
	},
  methods:{
    click(e){
      console.log(e)
    }
  }
}
</script>

<style>
.is-selected {
    color: #1989FA;
  }
.el-calendar-table .el-calendar-day {
  height: auto;
}
</style>