element el-date-picker 插件设置显示默认开始时间和结束时间

在开发过程中可能根据需要设置一个默认的时间段，在网上看了很多相关的信息，大多数都显得很笼统并且麻烦，研究了一下el-date-picker 插件的属性，发现了一个比较简单的方法，来跟大家分享一下。

1.需求分析

当用户打开某一个需要查询数据的页面时，插件默认显示上一个月的时间，如当前三月则需要显示二月份：

考虑到每一个月的天数不一定，但是每一个月都是从一号开始，所以只要终止日期小于下一个月1号就可以满足需求，所以最后效果可以为这样：

前提是先声明后端查询时需要返回包括开始时间，但不包括结束时间

2.分析el-date-picker插件的v-model

假设当前我的插件为如下代码:

<el-date-picker
 v-model="date"
 value-format="yyyy-MM-dd"
 type="daterange"
 range-separator="-"
 start-placeholder="开始日期"
 end-placeholder="结束日期"
 size="small">
</el-date-picker>

注：这里date的定义为getdate:[],定义为getdate:'',无法实现
当选择好一个时间后，在日志里打印这个date（console.log(this.date)）可以在控制台看到如下数据：

可以看到插件绑定的对象date是一个数组，所以我们直接指定他的元素值就可以改变他显示的时间了，需要注意的是，0号元素和1号元素必须同时设置，不然会导致控件不显示时间

this.date[0]=this.startdate;
this.date[1]=this.enddate;

之前在网上看到很多文档，大多数都要重写一个方法，比较麻烦，懒人直接用这个方法就好了，两行代码简单粗暴。

3.设置默认时间为上一个月

直接贴代码：

            created: function () {               
                var now = new Date();
                var year = now.getFullYear(); //得到当前年份
                var month = now.getMonth(); //默认得到月份是上一个月，如果当前是3月，这个值为2月
                if(month ==12)	//如果当前是1月，则获取到的数据为12月，年份减一
                    year=year -1;
                var nextMonth=month+1;//其实就是当前月份
                month = month.toString().padStart(2, "0");	//当小于10时，显示为01.02.03
                nextMonth = nextMonth.toString().padStart(2, "0");
                this.startdate = `${year}-${month}-01`;//拼接日期
                this.enddate = `${year}-${nextMonth}-01`;
                console.log(this.startdate+"  "+this.enddate );
                this.date[0]=this.startdate;
                this.date[1]=this.enddate;
                this.queryData();//调用方法查询指定时间段内的数据    
            }

注释里都已说清代码具体含义，方法比较简单粗暴，如果有更好的方法欢迎一起讨论