element表单daterangeChange回显赋值之后重新选择，:rules校验相关不更新值的问题

<el-form-item prop="timeDate" label="时间">

<el-date-picker

v-model="form.timeDate"

@input="daterangeChange" 

value-format="yyyy-MM-dd HH:mm:ss"

type="datetimerange"

range-separator="-"

start-placeholder="开始时间"

end-placeholder="结束时间"

/>

</el-form-item>

一、使用@input保证form表单数据更新

daterangeChange(e){

let _this = this

_this.$nextTick(() => {

_this.$forceUpdate()

})

},

二、在validator中编写自定义校验规则时不使用value，而使用v-model双向数据绑定的值进行判断

timeDate: [

{

required: true,

trigger: "blur",

validator: (rule, value, callback) => {

// 注意这里"value"的值不会及时改变，需要用到双向绑定的值，即"formData.timeDate"

if (

!this.form.timeDate ||

this.form.timeDate.length === 0 ||

this.form.timeDate[0] === "" ||

this.form.timeDate[1] === ""

) {

callback(new Error("请选择时间"));

} else if (

new Date(this.form.timeDate[0]) <= new Date().getTime() + 60 * 10 * 1000 ||

new Date(this.form.timeDate[0]) >=

new Date().getTime() + 60 * 60 * 24 * 30 * 6 * 1000

) {

callback(

new Error(

"开始时间需要在当前时间的10分钟后且不能在6个月后"

)

);

} else if (

new Date(this.form.timeDate[1]) - new Date(this.form.timeDate[0]) < 60 * 30 * 1000 ||

new Date(this.form.timeDate[1]) - new Date(this.form.timeDate[0]) > 60 * 60 * 24 * 1000

) {

callback(

new Error(

"开始时间和结束时间间隔不得短于30分钟，不得超过24小时"

)

);

} else {

callback();

}