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();
      },
}
相关推荐
半点寒12W1 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏2 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083163 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's4 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫4 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim5 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron