关于elementui 验证问题 验证某个值大于另外一个值

elementui ui表单验证区间

<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px">
      <el-form-item
        :rules="[{ minTime: ruleForm.available_after, validator: validateRate, trigger: 'blur' },{required: true, message: '上线时间', trigger: 'blur'}]"
        label="上线时间" prop="available_after">
        <el-date-picker
          v-model="ruleForm.available_after"
          format="yyyy-MM-dd HH:mm"
          placeholder="选择上线时间"
          size="small"
          type="datetime"
          value-format="timestamp"
        ></el-date-picker>
      </el-form-item>
      <el-form-item
        :rules="[{ maxTime: ruleForm.available_before, validator: validateRate, trigger: 'blur' },{required: true, message: '下线时间', trigger: 'blur'},]"
        label="下线时间" prop="available_before">
        <el-date-picker
          v-model="ruleForm.available_before"
          format="yyyy-MM-dd HH:mm"
          placeholder="选择下线时间"
          size="small"
          type="datetime"
          value-format="timestamp"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-button size="small" type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>

//上线时间 下线时间验证
validateRate(rule, value, callback) {
    if (this.ruleForm.available_before === '' && this.ruleForm.available_after === '') {
        callback(new Error('请选择时间'))
    } else if (this.ruleForm.available_before == '' && this.ruleForm.available_after || this.ruleForm.available_after == '' && this.ruleForm.available_before) {
        callback()
    } else if (this.ruleForm.available_before <= this.ruleForm.available_after) {
        callback(new Error('上线时间不能大于下线时间'))
    } else {
        if (this.$refs.ruleForm.fields[3].validateMessage) {
            this.$refs.ruleForm.fields[3].clearValidate();
        }
        if (this.$refs.ruleForm.fields[4].validateMessage) {
            this.$refs.ruleForm.fields[4].clearValidate();
        }
        callback();
    }
},