Element UI中el-calendar日历的年月快捷选择（可下拉选框选择）

需求：

以日历形式展现当前页面。其中，年月可进行下拉选择，默认选中当月，用户可以自由点选日期

实现思路：右上角年月元素隐藏掉，写一个下拉选框，通过css定位到正确位置，通过vue计算属性进行数据绑定

实现效果：

实现代码：

   <!-- 日历表 -->
            <div class="block Calendarselect">
              <el-date-picker
                v-model="monthValue"
                type="month"
                size="mini"
                style="width：150px"
                @change="changeMonth"
                :clearable="false"
              ></el-date-picker>
            </div>
            <el-calendar style="margin: 5px 10px" v-model="nowdate"
              ><template #dateCell="{ data }"
                ><div style="width: 100%; height: 100%">
                  <div class="spandate">{{ data.day.slice(-2) }}</div>
                  <div
                    v-for="item in arrTime"
                    :key="item.date"
                    class="calendar-count"
                  >
                    <div v-if="data.day == item.date">
                      <span> {{ item.count }} </span>
                    </div>
                  </div>
                </div></template
              ></el-calendar>

 computed: {
    monthValue: {
      get: function () {
        return this.nowdate;
      },
      set: function (newValue) {
        this.nowdate = newValue;
      },
    },
  },

methods方法

  //月下拉选框
    changeMonth() {
      this.nowdate = new Date(this.nowdate);
    },

选择框样式：

.Calendarselect {
  top: 22px;
  position: relative;
  text-align: right;
  left: 46%;
}
//去掉日历中自带的年月按钮
.el-button-group {
  display: none !important;
}