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()
})
},
