要实现如下效果：

image.png

<template>
  <a-range-picker :placeholder="placeholder"
                  class="common-style a-date-width"
                  format="YYYY-MM-DD"
                  :ranges="preset"
                  @change="onChangeLoan"
  >
    <template slot="suffixIcon">
      <a-icon type="down" style="font-size: 12px" />
    </template>
  </a-range-picker>

</template>

<script>
import moment from 'moment'

export default {
  name: 'SelectDate',
  props: {
    placeholder: Array
  },
  data() {
    return {
      preset: {
        本月: [moment().startOf('month'), moment()],
        上月: [moment().month(moment().month() - 1).startOf('month'), moment().month(moment().month() - 1).endOf('month')],
        lastLastMon: [moment().month(moment().month() - 2).startOf('month'), moment().month(moment().month() - 2).endOf('month')],
        今年: [moment().startOf('year'), moment()],
        去年: [moment().year(moment().year() - 1).startOf('year'), moment().year(moment().year() - 1).endOf('year')]
      }
    }
  },
  mounted() {
    this.sortPreset()
    this.placeholder.length === 1 && this.changeDateStyle()
  },
  methods: {
    sortPreset() { // preset按顺序展示
      const lastlastMonVal = this.preset.lastLastMon
      const lastYearVal = this.preset['去年']
      const CurrYearVal = this.preset['今年']
      delete this.preset.lastLastMon
      delete this.preset['去年']
      delete this.preset['今年']
      const aa = this.getPreMonthDay(this.vertDate(new Date()), 2).toString()
      this.preset[aa] = lastlastMonVal
      this.preset['今年'] = CurrYearVal
      this.preset['去年'] = lastYearVal
    },
    vertDate(obj) { // 日期转yyyy-MM-dd
      var date = new Date(obj)
      var y = 1900 + date.getYear()
      var m = '0' + (date.getMonth() + 1)
      var d = '0' + date.getDate()
      return y + '-' + m.substring(m.length - 2, m.length) + '-' + d.substring(d.length - 2, d.length)
    },
    /**
     *获取几个月前的输入日期，以'2022.05'格式返回
     *{param:DateTime} date 输入日期(YYYY-MM-DD)
     *{param:number } monthNum 月数
     */
    getPreMonthDay(date, monthNum) {
      var dateArr = date.split('-')
      var year = dateArr[0] // 获取当前日期的年份
      var month = dateArr[1] // 获取当前日期的月份
      var day = dateArr[2] // 获取当前日期的日
      var days = new Date(year, month, 0)
      days = days.getDate() // 获取当前日期中月的天数
      var year2 = year
      var month2 = parseInt(month) - monthNum
      if (month2 <= 0) {
        var absM = Math.abs(month2)
        year2 = parseInt(year2) - Math.ceil(absM / 12 == 0 ? 1 : parseInt(absM) / 12)
        month2 = 12 - (absM % 12)
      }
      var day2 = day
      var days2 = new Date(year2, month2, 0)
      days2 = days2.getDate()
      if (day2 > days2) {
        day2 = days2
      }
      if (month2 < 10) {
        month2 = '0' + month2
      }
      var t2 = year2 + '.' + month2
      return t2
    },
    onChangeLoan(date, dateString) {
      this.$emit('startDate', dateString[0])
      this.$emit('endDate', dateString[1])
      if (this.placeholder.length === 1) {
        if (date.length) {
          document.querySelector('.ant-calendar-range-picker-separator').innerHTML = '~'
          const input = document.getElementsByClassName('ant-calendar-range-picker-input')
          const inputs = Array.from(input)
          inputs[0].classList.remove('reset-datepicker1')
          inputs[1].classList.remove('reset-datepicker2')
        } else {
          this.changeDateStyle()
        }
      }
    },
    changeDateStyle() {
      document.querySelector('.ant-calendar-range-picker-separator').innerHTML = ''
      const input = document.getElementsByClassName('ant-calendar-range-picker-input')
      const inputs = Array.from(input)
      inputs[0].classList.add('reset-datepicker1')
      inputs[1].classList.add('reset-datepicker2')
    }
  }
}
</script>

<style>
  .reset-datepicker1 {
    width: 64%;
    text-align: left;
  }
  .reset-datepicker2 {
    width: 30%;
  }
</style>