背景

我有弹窗创建任务时间的需求，同时也可以修改任务时间，所以复用了弹窗和表单，但在表单里使用日期时间组件的时候，发现了问题

问题描述：在表单中使用form的属性绑定日期时间选择器的v-model，会出现的两个问题如下

1. 修改时间的时候，回显会有问题

2. 表单的校验会用不了

   <el-form-item label="任务时间" prop="taskTime"><el-date-pickerv-model="form.taskTime"placeholder="请选择时间范围"type="datetimerange"range-separator="~"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd HH:mm:ss"width="400px"/></el-form-item>

解决方式如下：

vue组件部分

<el-form-item label="任务时间" prop="taskTime"><el-date-pickerv-model="form.taskTime":key="datePickerKey"placeholder="请选择时间范围"type="datetimerange"range-separator="~"@input="datetimeChange"start-placeholder="开始日期"end-placeholder="结束日期"value-format="yyyy-MM-dd HH:mm:ss"width="400px"/></el-form-item>

js部分

data() {return {form: {taskTime: [null, null], // 确保初始化},datePickerKey: 0,rules: {taskTime: [{ type: 'array', required: true, trigger: 'blur', message: '请选择任务时间' },{validator: (rule, value, callback) => {const val = this.form.taskTime;if (val && val.length === 2 && val[0] && val[1]) {callback();} else {callback(new Error('请选择任务时间'));}},},},};},watch: {visible(newV) {if(!newV) { // 关闭弹窗的时候清空表单校验this.$nextTick(() => {this.$refs.formRef.clearValidate();});}}},
methods: {/*** 开始日期-结束日期改变* **/datetimeChange(e) {if (e && e.length === 2) {this.$set(this.form, 'taskTime', e);} else {this.$set(this.form, 'taskTime', ['', '']);}this.$refs.formRef.clearValidate(['taskTime']);this.datePickerKey = (new Date()).getTime();},
}