背景

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

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

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

2. 表单的校验会用不了

   <el-form-item label="任务时间" prop="taskTime">
         <el-date-picker
            v-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-picker
            v-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();
      },
}