網上查el-calendar相關的按鈕點擊事件文章，清一色都是在mounted掛載階段通過document.querySelector綁定類名添加點擊事件。

我想說為啥要弄得這么麻煩？el-calendar組件標簽中v-model綁定了一個Date/string/number的時間值，無論點擊上述哪個按鈕，該值都是會改變的。
而我們想要實現的是當該時間值改變時（例如變成上個月或下個月或其他時間變回今天）執行某個事件，那直接用watch來監聽該值來實現邏輯不就更方便且簡單了么

放一下我這邊的代碼：
el-calendar組件標簽，v-model綁定的變量命名為calendarDate：

      <el-calendar v-model="calendarDate">
        <template slot="dateCell" slot-scope="{ date, data }">
          <p :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split("-").slice(1).join("-") }}
            {{ data.isSelected ? "??" : "" }}
          </p>
          <el-input
            v-if="data.type == 'current-month'"
            :disabled="timeOptions(date)"
            v-model="calendarData[date.getDate() - 1]"
            step="0.01"
            type="number"
            size="mini"
            :min="0"
          >
          </el-input>
        </template>
      </el-calendar>

js代碼：
（這里用到了momentjs，一個非常方便的時間處理類庫，建議使用，官方文檔傳送門：Moment.js）

let moment = require("moment");

  data() {
    return {
      // 讓el-calendar綁定一個Date型的值，初始為當前時間
      calendarDate: new Date(),
      calendarData: [0],
    };
  },

  watch: {
    // 用watch監聽calendarDate
    // 1. 我自己項目中用到的較為簡單的邏輯：
    // 即不管點擊了上月還是下月，只要時間改變，就執行函數initFormData，調用接口，將請求到的新數據重新渲染在el-calendar組件的內容上
    calendarDate(val, oldVal) {
      if (
        val &&
        moment(val).format("YYYY-MM") != moment(oldVal).format("YYYY-MM")
      ) {
        this.initFormData(val);
      }
    },

	// 2. 更嚴謹的寫法，直接復制粘貼代碼的朋友記得把上方的1.刪掉再使用
	calendarDate(val, oldVal) {
      if (
        val &&
        moment(val).format("YYYY-MM-DD") == moment().format("YYYY-MM-DD")
      ) {
        console.log("點擊了‘今天’按鈕");
      } else if (
        val &&
        moment(val).toDate() < moment(oldVal).startOf("month").toDate()
      ) {
        console.log("點擊了‘上個月’按鈕");
      } else if (
        val &&
        moment(val).toDate() > moment(oldVal).endOf("month").toDate()
      ) {
        console.log("點擊了‘下個月’按鈕");
      } else {
        console.log("點擊了" + moment(val).format("YYYY-MM") + "的按鈕");
      }
    },
  },

實操效果：

不過這種實現方式有個小bug：當天是某個月的1日時，通過點擊“上個月”和“下個月”按鈕回到當月，就會執行點擊“今日”的邏輯事件。這個就根據各位項目中的用法自行優化了。

直接綁定點擊事件

使用最開始說的那種在mounted里綁定點擊事件的方法，可以避免上述bug，在這里也一起貼上來，可自行擇優使用：

<script>
export default {
  name: "Calendar",
  data() {
    return {
      calendarDate: new Date(),
    };
  },
  components: {},
  mounted() {
    this.$nextTick(() => {
      // 點擊前一個月
      let prevBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(1)"
      );
      prevBtn.addEventListener("click", () => {
        this.judgeDate(this.calendarDate);
      });
      let dayBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(2)"
      );
      dayBtn.addEventListener("click", () => {
        this.judgeDate(this.calendarDate);
      });
      let nextBtn = document.querySelector(
        ".el-calendar__button-group .el-button-group>button:nth-child(3)"
      );
      nextBtn.addEventListener("click", () => {
        this.judgeDate(this.calendarDate);
      });
    });
  },
  methods: {
    // 判斷時間
    judgeDate(dateVal) {
		console.log(dateVal);
    },
  },
};
</script>

更多日歷組件的項目應用可詳見我的下一篇文章，例如給每一天加input輸入框、超過當天時間和跨一個月前的時間禁用輸入框等等：

感謝觀看，THX~