Q：elementUI时间or日期范围选择器，无法及时更新输入框内数据，校验不生效
A：使用$forceUpdate强制刷新，校验使用双向绑定的值

<el-form-item label="上下班打卡时间" prop="workTime">
  <el-time-picker
      @input="timerangeChange"
      is-range
      v-model="formData.workTime"
      range-separator="-"
      value-format="HH:mm:ss"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      placeholder="选择时间范围"
    >
  </el-time-picker>
</el-form-item>

校验：

// 校验
data() {
  let validateTimeRange = (rule, value, callback) => {
      // 注意这里"value"的值不会及时改变，需要用到双向绑定的值，即"formData.workTime"
      if (!this.formData.workTime || this.formData.workTime.length < 2) {
        callback(new Error('请选择时间范围'))
      } else {
        callback()
      }
    }
  return {
    formData: {
      workTime: ''
    },
    rules: {
      workTime: [{ required: true, validator: validateWorkTime, trigger: 'change' }],
    }
  }
}

强制刷新值：

timerangeChange(e) {
  // time-range选择器数据更新
  this.$nextTick(() => {
    e ? this.$set(this.formData, 'workTime', [e[0], e[1]]) : this.$set(this.formData, 'workTime', '')
    this.$forceUpdate()
  })
},