Antd Vue range-picker 日期初始值设置 与 重置日期踩坑总结

一、业务场景：
1.用form表单包裹，用的是 Antd Vue range-picker链接

2.创建时间初始值设置为当天的 00:00:00-23:59:59：如下截图：

2.日期选择器如下截图：

3.一进页面，直接点击重置按钮，没有触发日期选择框的onchage事件，页面的时间选择框要变成如下截图：

二、附上正确的代码片段：

<a-form class="ant-advanced-search-form" :form="form" @submit="handleSubmit">
  <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="创建时间" :label-col="{span:8}" :wrapper-col="{span:16}">
              <a-range-picker
                v-decorator="['createTime',{
                  initialValue:defaultTime
                }]"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                @change="onChangeRangePicker"
              />
            </a-form-item>
          </a-col>
           <a-col :span="6" style="text-align: right">
            <a-button type="info" class="button-right" @click="handleReset">重置</a-button>
            <a-button type="primary" html-type="submit">查询</a-button>
          </a-col>
  </a-row>
</a-form>

  data() {
    return {
      createStartTime: moment().format('YYYY-MM-DD' + ' 00:00:00'), // 创建起始时间-筛选框
      createEndTime: moment().format('YYYY-MM-DD' + ' 23:59:59'), // 创建结束时间-筛选框
      }
  },

  computed: {
    defaultTime() {
      if (this.createStartTime === '' || this.createEndTime === '') return []    //
      return [moment(this.createStartTime, 'YYYY-MM-DD HH:mm:ss'), moment(this.createEndTime, 'YYYY-MM-DD HH:mm:ss')]
    }
  },


 methods: {
    // 创建时间
    onChangeRangePicker(value, dateString) {
      console.log('Selected Time: ', value)
      console.log('Formatted Selected Time: ', dateString)
      this.createStartTime = dateString.slice(0, 1).toString()
      this.createEndTime = dateString.slice(1, 2).toString()
    },
    //重置按钮
   handleReset() {
      this.createStartTime = ''
      this.createEndTime = ''
  }
}

三、踩坑点与解决：
1.刚开始写的Form表单里的日期选择框代码片段：

 <a-form-item label="创建时间" :label-col="{span:8}" :wrapper-col="{span:16}">
              <a-range-picker
                v-decorator="['createTime']"
                :default-value="[moment(createStartTime, 'YYYY-MM-DD HH:mm:ss'), moment(createEndTime, 'YYYY-MM-DD HH:mm:ss')]"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                @change="onChangeRangePicker"
              </a-select>
            </a-form-item>
//下面在computed计算属性里没有写defaultTime(){}

解析：（1）这里写了default-value，虽然实现了，界面刚进来时候初始，默认日期为当天，但是一进页面，直接点击重置按钮，虽然this.createStartTime = ‘’
this.createEndTime = ‘’，但是日期选择框展示的并没有置空
（2）排查很久，看到Antd Vue Form表单官方连接

（3）其中有一句特别注意：你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
（4）因此想到摈弃 defaultValue 属性，用initialValue

2.于是有了上述正确的代码片段
（1）在日期选择框写了

 v-decorator="['createTime',{
                  initialValue:defaultTime
                }]"

（2）在computed计算属性了写了如下代码段

  cocmputed: {
    defaultTime() {
    
    //当this.createStartTime === '' || this.createEndTime === '的时候，要return一个空数组
    //此时在moment解析的时候，就在界面上展示为空，否则会解析成 Invalid date（无效的日期）
     if (this.createStartTime === '' || this.createEndTime === '') return []    
     //当起始日期与结束日期不为空的时候，执行如下代码段
      return [moment(this.createStartTime, 'YYYY-MM-DD HH:mm:ss'), moment(this.createEndTime, 'YYYY-MM-DD HH:mm:ss')]
    }
  },

四、反思与总结：

1. Antd Vue ：range-picker，date-picker等日期选择框，在form表单里一旦用form包裹。如果要设置初始值，一般不推荐使用defaultValue，推荐使用initialValue。
2. 刚开始死磕非要用defaultValue，但是未解决，就去了Antd Vue官方文档，将时间选择框和Form表单的 API /官方文字描述挑选重点，看了一遍，最终运用initialValue解决了bug。
3. 以此也总结了两个点：
   （1）如果用一种思路弄了半个小时到一个小时还是没解决，那就换一种思路解决，不能钻牛角尖。
   （2）在写代码时候，引用了第三方的官方文档，大多数情况下，不要自己硬着头皮想，要学会灵活运用该官方文档封装好的API。
   以上就是我的拙见。