element日历上月下月样式修改

隐藏默认样式

  .el-button-group {
    display: none; //隐藏默认样式
  }

组件中添加ref

            <el-calendar ref="uploadImgBtn" v-model="value" id="calendar">

            </el-calendar>

自定义样式

              <i @click="clickPrevious"  class="el-icon-arrow-left"></i>
              <i @click="clickNext"  class="el-icon-arrow-right"></i> 

触发上月下月事件

    clickPrevious() {
      this.$refs.uploadImgBtn.$children[0].$children[0].$el.click()
    },
    clickNext() {
      this.$refs.uploadImgBtn.$children[0].$children[1].$el.click()
    },

![效果](https://img-blog.csdnimg.cn/47f7a78f10bb4d20bbeceabb28f359cf.jpeg

    this.$nextTick(() => {
      // 点击前一个月
      let prevBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(1)'
      )
      prevBtn.addEventListener('click', e => {
      console.log(e)
      })

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

    })

.el-calendar-table tbody tr:last-child{
    display: none !important; //每个月的日历显示五行
}