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();
      },
}
相关推荐
大模型真好玩几秒前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫24 分钟前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler28134 分钟前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵1 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温1 小时前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi1 小时前
JavaScript - 策略模式在开发中的应用
前端
xptwop1 小时前
05-ES6
前端·javascript·es6
每天开心1 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺1 小时前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化