elmentui 表单验证问题

<template>
  <div class="container">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px">
      <el-form-item label="礼包名称" prop="name">
        <el-input v-model.trim="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="礼包金额(元)" prop="money">
        <el-input-number
          v-model="ruleForm.money"
          :min="1"
          controls-position="right"
          style="width: 200px"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="倒计时时间" prop="countDown">
        <el-input-number
          v-model="ruleForm.countDown"
          :min="1"
          controls-position="right"
          style="width: 200px"
        ></el-input-number>
      </el-form-item>
      <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>
        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        money: '',
        countDown: 1,
        available_after: '',
        available_before: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入礼包名称', trigger: 'blur'},
        ],
        money: [
          {required: true, message: '请输入礼包金额', trigger: 'blur'},
        ],
        countDown: [
          {required: true, message: '请输入倒计时时间', trigger: 'blur'},
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    validateRate(rule, value, callback) {
      console.log(this.$refs.ruleForm.fields)
      // this.$refs.ruleForm.fields[0].validateMessage ='error'
      console.log(this.ruleForm.available_before <= this.ruleForm.available_after)
      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();
      }
    }
  },
  computed: {}
}
</script>

主动触发错误提示操作

this.$refs.ruleForm.fields[4].validateMessage='';
//移除该表单项的校验结果
this.$refs.ruleForm.fields[4].clearValidate();