element-ui 日期区间选择控件 根据所选月份 日期区间 同一个月

背景：
在一个管理后台中，需要根据选择的月份，来联动控制 时间区间 的显示（并且在月份选择之前，日期范围不可选）
示例图：

1、初始化页面
2、选择年月

3、选择日期范围

代码：
1、组件 => element-ui

//
<div class="input_div">
    <span>申报年月</span>
    <el-date-picker
    type="month"
    placeholder="选择申报年月"
    v-model="applyMonth"
    @change="changeApplyMonth"
    >
    </el-date-picker>
</div>
<div class="input_div">
    <span>所属时段</span>
    <el-date-picker
    v-model="applyDate"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :default-value="defaultVal"
    :picker-options="pickerOptions"
    @change="changeApplyDate"
    :disabled="applyMonth==''"
    >
    </el-date-picker>
</div>


data(){
	applyMonth:"",
	applyDate:"",
	defaultVal:"",
	defaultValYear:"",
	defaultValMon:"",
	/*
		关键代码是这里*********
		注意要用箭头函数，否则会报错
	*/
	pickerOptions:{
	    disabledDate: (time)=>{
	        return (this.defaultVal && new Date(this.defaultVal).getMonth()!== time.getMonth())
	    }
	},
	/*
		关键代码是这里*********
	*/
},

methods:{
	//修改月份
	changeApplyMonth(val){
	    this.defaultVal = val.getFullYear()+"-"+(val.getMonth()+1)+"-"+"1";
	    this.defaultValYear = val.getFullYear();
	    this.defaultValMon= val.getMonth()+1;
	    console.log(this.defaultVal);
	},
	//修改日期
	changeApplyDate(val){
	    let val0 = val[0];
	    let val1 = val[1];
	    let startDate = val0.getFullYear() + "-" + (val0.getMonth()+1) + "-" + val0.getDate();
	    console.log(startDate);
	    let endDate = val1.getFullYear() + "-" + (val1.getMonth()+1) + "-" + val1.getDate();
	    console.log(startDate,endDate);
	},
}

ps：样式就不贴了，每个项目的样式需求不一样，日期标签外面的div壳子是我自己包的，可以不粘。