el-form+el-date-picker组合使用时候的回显问题

背景

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

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

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

  2. 表单的校验会用不了

javascript 复制代码
   <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组件部分

javascript 复制代码
<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部分

javascript 复制代码
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();
      },
}
相关推荐
Zuckjet_7 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801467 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店9 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown9 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy9 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip10 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿11 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法11 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴11 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.12 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js