已知需求就是在页面初始化的时候就执行一遍查询，我们的查询条件携带起止时间，不过我们只携带年和月，不带日所以这个要求是一个比较独特的要求的！

上图：

 可以看到初始进入我们就显示维护时间，一定要看清楚我们只有年和月，但是在el-date-picker组件中是不可以不携带日的，其实也就很明显，我们这样如图的时间就是【‘20230101’，‘20230801’】因为我们new data是需要我们自己手动进行格式编辑的

<el-col :span="2" style="text-align: center">维护时间:</el-col>
        <el-col :span="6" style="text-align: center">
          <el-date-picker v-model="RQ" size="mini" type="monthrange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions" value-format="yyyyMMdd"
            :start-date="startDate" :end-date="endDate" style="width: 80%">
          </el-date-picker>
        </el-col>

value-format="yyyyMMdd"这里我们定义的是年月日连在一起，如果你要其他格式也是可以随意编辑的。

已知我们的时间结构就直接告诉大家我是怎么改动这个日期的吧

我们通过v-model="RQ"去更改；这是RQ在data数据里面的格式；

 RQ: [],

在mounted生命周期里面执行这句话

// 添加初始页面查询日期
    let rq = new Date();
    let year = rq.getFullYear();
    // 当前月
    let month = rq.getMonth() + 1 < 10 ? "0" + (rq.getMonth() + 1) : rq.getMonth() + 1;
    // 起止时间
    let uptime = year + "0101";
    let overtime = year + month + '01'
    // 添加进去日期
    this.RQ.push(uptime);
    this.RQ.push(overtime)

这个操作就是获取new data然后获取年和月，我们的查询范围是默认本年的一月到当前月，所以uptime代表起始时间，overtime代表截止时间。然后在push进去我们的空数组RQ，因为RQ通过v-model进行绑定所以我们直接使用就可以了，就在页面初始加载默认显示了。