Bootstrap

Error in v-on handler (Promise/async): “TypeError: Cannot read property ‘format‘ of undefined“

1、代码贴上:
html
<a-form-item label="异常数据发生时间:">
 <a-range-picker
    :ranges="{ '今天': [moment(), moment()], '这个月': [moment(), moment().endOf('month')] }"
    show-time
    format="YYYY/MM/DD HH:mm:ss"
    v-decorator="['happenTime']"
    @change="getTime"
  />
</a-form-item>
js
//获取页面搜索条件
getQuery(){
 let startTm = this.form.getFieldValue('happenTime') ? this.form.getFieldsValue().happenTime[0].format(
   'YYYY-MM-DD HH:mm:ss'): null
 let endtm = this.form.getFieldValue('happenTime') ? this.form.getFieldsValue().happenTime[1].format(
   'YYYY-MM-DD HH:mm:ss'): null
 let query
 // 无时间筛选
 if(!startTm || !endtm) {
   query = {
     stationName: this.form.getFieldsValue().stationName,
     stationType: this.form.getFieldsValue().stationType,
     region: this.form.getFieldsValue().region,
     deviceType: this.form.getFieldsValue().deviceType
   }
 } else {
   query = {
     stationName: this.form.getFieldsValue().stationName,
     stationType: this.form.getFieldsValue().stationType,
     startTm,
     endtm,
     region: this.form.getFieldsValue().region,
     deviceType: this.form.getFieldsValue().deviceType
   }
 }
 return query
},
2、页面效果:

在这里插入图片描述
在这里插入图片描述

3、点击确认获取到时间值,点击搜索也确实拿到时间的参数值,但是,如果你清空掉时间值,然后点击搜索,浏览器就直接报错:

在这里插入图片描述

4、解决:
//获取页面搜索条件
getQuery(){
  console.log(this.form.getFieldValue('happenTime').length)  // 判断是否选中或者清空
  let startTm = this.form.getFieldValue('happenTime').length > 0 ? this.form.getFieldsValue().happenTime[0].format(
    'YYYY-MM-DD HH:mm:ss'): null
  let endtm = this.form.getFieldValue('happenTime').length > 0 ? this.form.getFieldsValue().happenTime[1].format(
    'YYYY-MM-DD HH:mm:ss'): null
  let query
  // 无时间筛选
  if(!startTm || !endtm) {
    query = {
      stationName: this.form.getFieldsValue().stationName,
      stationType: this.form.getFieldsValue().stationType,
      region: this.form.getFieldsValue().region,
      deviceType: this.form.getFieldsValue().deviceType
    }
  } else {
    query = {
      stationName: this.form.getFieldsValue().stationName,
      stationType: this.form.getFieldsValue().stationType,
      startTm,
      endtm,
      region: this.form.getFieldsValue().region,
      deviceType: this.form.getFieldsValue().deviceType
    }
  }
  return query
},
5、需要根据具体情况去给判断条件,有时是 instanceof Object,打印选中日期和未选中的值去做比较就好
6、追加:点击重置按钮,再点击搜索,报length的错, 解决如下:
// 点击重置
handleReset() {
  this.form.resetFields()
  // 防报错,赋值空数组
  this.form.setFieldsValue({
    happenTime: []
  })
},

心有所期,全力以赴,定有所成!

;