vue中el-date-picker时间选择器的判断开始时间不大于结束时间

这前端是真的难，就这一个校验搞了快大半天，查出来的结果还都不怎么好用。
最后是参考的http://www.manongjc.com/detail/16-hyixjugqukmcvjc.html
在自己这记录一下。

<el-form-item label="开始时间" prop="dateFrom">
          <el-date-picker
            clearable
            size="small"
            v-model="form.dateFrom"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="开始时间"
            @change="handelDateFrom"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="dateTo">
          <el-date-picker
            clearable
            size="small"
            v-model="form.dateTo"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="结束时间"
            @change="handelDateTo"
          ></el-date-picker>
        </el-form-item>

data () {
    return {
    	//这个例子在上午的时候用过了，并没有生效，是这里忘了加双向绑定。。。。
		dateFrom: null, 
      	dateTo: null,
		}
    }
    // 表单校验
      rules: {
        
        dateFrom: [
          { required: true, message: "开始时间不能为空", trigger: "change" },
          {
            validator: this.validationDateFrom
          }
        ],
        dateTo: [
          { required: true, message: "结束时间不能为空", trigger: "change" },
          {
            validator: this.validationDateTo
          }
        ]
      }

methods: {
    // 自定义验证规则(校验开始日期)
    validationDateFrom: function (rule, value, callback) {
      // 比较时间戳(进行运算的时候会自动转换成时间戳进行运算，不运算的时候，显示中国标准时间格式)
      if (
        new Date(this.form.dateTo) - new Date(value) <= 0 &&
        this.form.dateTo &&
        value
      ) {
        return callback(new Error('*开始时间不能大于结束时间'))
      }
      callback()
    },
    // 自定义验证规则(校验截止日期)
    validationDateTo: function (rule, value, callback) {
      // 比较时间戳(进行运算的时候会自动转换成时间戳进行运算，不运算的时候，显示中国标准时间格式)
      if (
        new Date(value) - new Date(this.form.dateFrom) <= 0 &&
        this.form.dateTo &&
        value
      ) {
        return callback(new Error('*结束时间不能小于开始时间'))
      } callback()
    },
    // 当开始时间变化时,需要重新校验
    handelDateFrom (value) {
      if (
        new Date(this.form.dateTo) - new Date(value) > 0 &&
        this.form.dateTo &&
        value
      ) {
        // 重新校验
        this.$refs.form.validate()
      }
    },
    handelDateTo (value) {
      if (
        new Date(value) - new Date(this.form.dateFrom) > 0 &&
        this.form.dateFrom &&
        value
      ) {
        this.$refs.form.validate()
      }
    }
}

测试的时候发现，当两个时间选择完毕且校验通过，表单中其他的项目空白的时候会直接提示错误信息，很不友好

然而天真的我以为是

rules: {}

里面有顺序，调整了发现没什么效果，回头重新阅读这段代码，发现有这一段

// 重新校验
        this.$refs.form.validate()

改成

this.$refs.form.validateField('dateFrom', async (valid) => {
          if (valid) {
            return false
          }
        })

好了，抽烟去了