用得vue2的寫法哦，
效果如下圖：

直接上代碼：

引用ElementUI的月份組件：

<el-date-picker
                            v-model="queryParams.reportDate"
                                type="monthrange"
                                :editable="false"
                                :clearable="false"
                                format="yyyy 年 MM 月"
                                value-format="yyyy-MM"
                                range-separator="至"
                                start-placeholder="開始月份"
                                end-placeholder="結(jié)束月份" 
                                :picker-options = "monthpickoption">
                                </el-date-picker>

export default {
    components:{LineChart,yearPicker,DateWeekRange},
    data() {
        return {
        trendData: {
                date: []
            },
            minDate: null,
            maxDate: null,
            monthpickoption:{
            disabledDate: (time) => {
              if (this.minDate !== null && this.maxDate === null) {
                  let minMonth = this.minDate.getMonth(),
                  lastYear = new Date(this.minDate).setMonth(minMonth - 11),
                  nextYear = new Date(this.minDate).setMonth(minMonth + 11);
                let minTime = this.minDate.getTime()
                let nextTime = new Date().setMonth(new Date().getMonth() + 11)
                let lastTime = new Date().setMonth(new Date().getMonth() - 11)
               if (minTime <= nextTime || minTime >= lastTime){
                  //開始日期少于當(dāng)前月+12個(gè)月 并且大于當(dāng)前月-12個(gè)月，則表示只限制前面的范圍
                  return time.valueOf() > new Date().getTime() || time.valueOf() > nextYear.valueOf() || time.valueOf() < lastYear.valueOf()
                }
                else {
                  // 只能選 minDate 前后一年的范圍
                  return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
                }
              }else {
                let startMonth = this.trendData.date[0]
                let month = new Date(startMonth).getMonth()
                let lastMonth = new Date(startMonth).setMonth(month - 11)
                //如果有默認(rèn)值，只禁用開始日期，因?yàn)橐呀?jīng)限定了禁用未來范圍，且默認(rèn)值已經(jīng)為12個(gè)月范圍
                return this.monthPick(time) || time < lastMonth.valueOf();
              }
            },
            onPick: ({minDate, maxDate}) => {
              this.minDate = minDate;
              this.maxDate = maxDate;
            }
            },
         }
      },
      methods: {
      	monthPick(time){
            // 獲取當(dāng)前的月份信息
            const date = new Date() // 獲取當(dāng)前的時(shí)間基本信息，值是這樣的： Tue Jul 20 2021 14:59:43 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間)
            const year = date.getFullYear() // 獲取當(dāng)前年份，值是這樣的： 2021
            let month = date.getMonth() + 1 // 獲取當(dāng)前月份，值是這樣的： 6   getMonth()方法返回值是0-11，也就是1月份到12月份，所以要加上1，才是當(dāng)前月份
            if (month >= 1 && month <= 9) {
              // 如果是1月到9月就要在前面補(bǔ)上一個(gè)0   比如：02、07    月份這樣表示
              month = '0' + month
            }
            const nowDate = year.toString() + month.toString() // 轉(zhuǎn)換成字符串拼接，最終得到年和月，比如此時(shí)的時(shí)間是2021年7月20號(hào)，所以nowDate的值是：202107
 
            // 獲取時(shí)間選擇器的月份信息
            const timeyear = time.getFullYear() // 獲取時(shí)間選擇器的年份（有很多）
            let timemonth = time.getMonth() + 1 // 與上面同理
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = '0' + timemonth
            }
            const elTimeData = timeyear.toString() + timemonth.toString()
 
            // 返回，時(shí)間選擇器的日期月份大于當(dāng)前日期的月份，又因?yàn)閐isabledDate函數(shù)是控制月份禁用不可選
            // 所以，最終就是：時(shí)間選擇器的月份大于當(dāng)前的月份，就都禁用掉，所以就實(shí)現(xiàn)了最終效果：
            // 大于等于當(dāng)前月份都不可選
            return elTimeData > nowDate // 這里雖然是字符串，但是弱類型語言js會(huì)做一個(gè)轉(zhuǎn)換，是可以比較大小的如： '202107' > '202008'
          },
      }

參考地址：
https://blog.csdn.net/ITERCHARLIE/article/details/127246715文章來源地址http://www.zghlxwxcb.cn/news/detail-740262.html

到了這里，關(guān)于vue element-ui月份范圍選擇器，禁用未來月份，跨度為12個(gè)月的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！