element 日历修改今天为当月，上个月下个月事件处理

 

 需求如下：

1.修改右上角今天为当月。

2.点击上个月下个月时切换数据。

 

代码如下：

 

mounted() {
    // 点击上一个月
    const prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)')
    prevBtn.addEventListener('click', () => {
      var month = this.month.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      this.month = `${this.month.getFullYear()}-${month}`
      console.log('这是上个月', this.month)

      // 请求数据
      this.getData()
    })

    // 修改今日为当月
    var spanDoc = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2) span')
    spanDoc.innerText = '当月'

    // 点击下一个月
    const nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)')
    nextBtn.addEventListener('click', () => {
      var month = this.month.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      this.month = `${this.month.getFullYear()}-${month}`
      console.log('这是下个月', this.month)

      // 请求数据
      this.getData()
    })

  },