概要

element上有一種月份期間的選擇框，可在一個選擇器中便捷地選擇一個月份范圍，但是我們的需求是用兩個月份選擇器，一個選擇器為開始時間，一個為結(jié)束時間，結(jié)束時間只能選擇開始時間以后的月份。效果如下圖：

全部代碼

代碼很簡單，就不解釋了。

<template>
  <div class="home">
    <el-form>
      <el-row>
          <el-row>
            <el-col :span="6">
              <!-- 開始月份 -->
              <el-form-item label="開始月份">
                <el-date-picker
                    v-model="queryConditionFrom.beginMonth"
                    type="month"
                    value-format="yyyyMM"
                    placeholder="選擇月">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <!-- 結(jié)束月份 -->
              <el-form-item label="結(jié)束月份">
                <el-date-picker
                    v-model="queryConditionFrom.endMonth"
                    type="month"
                    value-format="yyyyMM"
                    placeholder="選擇月"
                    :picker-options="pickerOptions"
                    >
                </el-date-picker>
              </el-form-item>
            
            </el-col>
          </el-row>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
  },
  data(){
    return{
      queryConditionFrom:{
        beginMonth:'',
        endMonth:'',
      },
      pickerOptions:{},
    }
  },
  methods:{

  },
  watch:{
    "queryConditionFrom.beginMonth"(newDate,oldDate){
      this.pickerOptions={
        disabledDate(time){
          let timeyear = time.getFullYear();
          let timemonth = time.getMonth()+1;
          if(timemonth>=1 && timemonth<=9){
            timemonth = "0" + timemonth;
          }
          const elTimeDate = timeyear.toString()+ timemonth.toString();
          if(newDate){
            return elTimeDate<newDate
          }
        }
      }
    }
  }
}
</script>