el-date-picker默认日期设置（选择器框中不默认显示数据解决经验）

！！网上能搜到许多关于如何设置日期的数据、功能方法，在此我们不多赘述，默认v-model绑定的数据没有问题。！！

在前端的开发中，我们有时会需要为日期选择器设置一个默认的日期，例如：7天/1周

通常来说，当我们在mounted中为v-model绑定的值赋值之后，若格式没有问题，那么日期选择器内的显示数据也会跟着改变。

但是我在开发中遇到了v-model的值正确设置，选择器点开能看到已经选择的范围，并且能正常的向服务器查询该时间段内的相应数据，可试了许多方法都无法使我在进入页面的时候就在日期选择器中直接显示日期范围。

网上貌似并没有这样的解决方法，有一个是解决输入回显问题的，为其附加key和input的，不过并不能解决这个问题

若你遇到的类似的问题并且感到困扰，不妨可以检验一下，自己在为v-model绑定的数组赋值的方法。

例如，

data () {
    return {
        time: []
    }
}

mounted() {
    let that = this
    // 范围为 1周，也就是 7天前 到 今天
    // 网上的方法一般只生成今天，我的第二个参数是周期gap，在day里减去gap就能得到七天前的日期
    that.time[0] = that.formateDate(new Date(), 7) // formateDate网上找的生成年月日的功能方法
    that.time[1] = that.formateDate(new Date(), 0) // new Date()会生成今天的日期
}

如果你用了类似上面的方法为time赋值，那么多半就会遇到和我一样的问题……这貌似是el-date-picker的数据回显逻辑所致，想了那么多，试了试网上各种方法后，我发现只要改一下赋值方法就行了。

data () {
    return {
        time: []
    }
}

mounted() {
    let that = this
    // 范围为 1周，也就是 7天前 到 今天
    // 网上的方法一般只生成今天，我的第二个参数是周期gap，在day里减去gap就能得到七天前的日期
    that.time.push(that.formateDate(new Date(), 7)) // formateDate网上找的生成年月日的功能方法
    that.time.psuh(that.formateDate(new Date(), 0)) // new Date()会生成今天的日期
}

只要用push将日期推进数组就行了，el-date-picker应该也是用push赋值的，所以直接给[0]和[1]的位置赋值在回显时就会有问题，就是不知道为什么点开选择器还是能正常显示已选择范围的_(:з」∠)_

这样就能解决默认不回显的问题了，不过我们仍然还要注意，设置了日期查询后清空，可能导致传参为null

Well，这不是什么大问题，如果你遇到了也只需注意在传递给服务器前检查一下选择器绑定的数组是否为null，然后将 起始时间 和 结束时间 = ''

希望对你有用~doge