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

背景

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

问题描述:在表单中使用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();},
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/66078.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式光伏规模界点为什么是6MW?

多省能源局规定大于6MW的电站必须按集中式管理&#xff0c;另外大于6MW&#xff08;包含&#xff09;要省级审批&#xff0c;小于则由市级审批&#xff0c;10kV线路单回接入容量也是6MW&#xff0c;很多电厂发电机装机容量也是以6MW为界点。这是什么原因呢&#xff1f; 配电网…

[2474].第04节:Activiti官方画流程图方式

我的后端学习大纲 Activiti大纲 1.安装位置&#xff1a; 2.启动&#xff1a;

Qt从入门到入土(七)-实现炫酷的登录注册界面(下)

前言 Qt从入门到入土&#xff08;六&#xff09;-实现炫酷的登录注册界面&#xff08;上&#xff09;主要讲了如何使用QSS样式表进行登录注册的界面设计&#xff0c;本篇文章将介绍如何对登录注册界面进行整体控件的布局&#xff0c;界面的切换以及实现登录、记住密码等功能。…

在 macOS 上,你可以使用系统自带的 终端(Terminal) 工具,通过 SSH 协议远程连接服务器

文章目录 1. 打开终端2. 使用 SSH 命令连接服务器3. 输入密码4. 连接成功5. 使用密钥登录&#xff08;可选&#xff09;6. 退出 SSH 连接7. 其他常用 SSH 选项8. 常见问题排查问题 1&#xff1a;连接超时问题 2&#xff1a;权限被拒绝&#xff08;Permission denied&#xff09…

关于大一上的总结

大一上总结 前言 源于学长们都喜欢写总结&#xff0c;今晚也正好听见一首有点触动心灵的歌&#xff0c;深有感慨&#xff0c;故来此写下这篇总结 正文 1.暑假前的准备 暑假之前姑且还是学习了基本的C语法&#xff0c;大概是到了结构体的地方&#xff0c;进度很慢&#xff0…

Spring Cloud Gateway-自定义异常处理

参考 https://blog.csdn.net/suyuaidan/article/details/132663141&#xff0c;写法不同于注入方式不一样 ErrorWebFluxAutoConfiguration Configuration(proxyBeanMethods false) ConditionalOnWebApplication(type ConditionalOnWebApplication.Type.REACTIVE) Condition…

121.【C语言】数据结构之快速排序(未优化的Hoare排序存在的问题)以及时间复杂度的分析

目录 1.未优化的Hoare排序存在的问题 测试代码 "量身定制"的测试代码1 运行结果 "量身定制"的测试代码2 运行结果 "量身定制"的测试代码3 运行结果 分析代码1、2和3栈溢出的原因 排有序数组的分析 分析测试代码1:给一个升序数组,要求排…

如何使用 `uiautomator2` 控制 Android 设备并模拟应用操作_VIVO手机

在 Android 自动化测试中,uiautomator2 是一个非常强大的工具,能够帮助我们通过 Python 控制 Android 设备执行各种操作。今天,我将通过一个简单的示例,介绍如何使用 uiautomator2 控制 Android 设备,执行特定的应用启动、广告跳过以及其他 UI 操作。此示例的目标是自动化…

Swift Combine 学习(七):实践应用场景举例

Swift Combine 学习&#xff08;一&#xff09;&#xff1a;Combine 初印象Swift Combine 学习&#xff08;二&#xff09;&#xff1a;发布者 PublisherSwift Combine 学习&#xff08;三&#xff09;&#xff1a;Subscription和 SubscriberSwift Combine 学习&#xff08;四&…

使用 PyInstaller 和 hdiutil 打包 Tkinter 应用为 macOS 可安装的 DMG 文件

在这篇文章中&#xff0c;我们将逐步演示如何将基于 Python 的 Tkinter 应用程序打包成一个 macOS .app 文件&#xff0c;并将其封装为 .dmg 文件&#xff0c;供用户安装。 环境准备 在开始之前&#xff0c;请确保您的开发环境满足以下条件&#xff1a; macOS 系统。安装了 …

DC-2 靶场渗透

目录 环境搭建 开始渗透 扫存活 扫端口 扫服务 看一下80端口 看一下指纹信息 使用wpscan扫描用户名 再使用cewl生成字典 使用wpscan爆破密码 登陆 使用7744端口 查看shell rbash绕过 切换到jerry用户 添加环境变量 现在可以使用su命令了 提权 使用git提权 环…

如何在 Ubuntu 22.04 上优化 Apache 以应对高流量网站教程

简介 在本教程中&#xff0c;我们将学习如何优化 Apache 以应对高流量网站。 当运行高流量网站时&#xff0c;确保你的 Apache Web 服务器得到优化对于有效处理负载至关重要。在本指南中&#xff0c;我们将介绍配置 Apache 以提高性能和可扩展性的基本技巧。 为高流量网站优…

安卓NDK视觉开发——手机拍照文档边缘检测实现方法与库封装

一、项目创建 创建NDK项目有两种方式&#xff0c;一种从新创建整个项目&#xff0c;一个在创建好的项目添加NDK接口。 1.创建NDK项目 创建 一个Native C项目&#xff1a; 选择包名、API版本与算法交互的语言&#xff1a; 选择C版本&#xff1a; 创建完之后&#xff0c;可…

02.01、移除重复节点

02.01、[简单] 移除重复节点 1、题目描述 编写代码&#xff0c;移除未排序链表中的重复节点。保留最开始出现的节点。 2、解题思路 为了实现这一目标&#xff0c;我们可以使用一个哈希表&#xff08;或集合&#xff09;来记录已经遇到的节点值&#xff0c;逐步遍历链表并删…

反向传播算法的偏置更新步骤

偏置的更新步骤 假设我们有一个三层神经网络&#xff08;输入层、隐藏层和输出层&#xff09;&#xff0c;并且每层的激活函数为 sigmoid 函数。我们需要更新隐藏层和输出层的偏置。以下是详细的步骤&#xff1a; 1. 计算误差项&#xff08;Error Term&#xff09; 输出层的…

【Ubuntu】不能连上网络

1. ping路由器的IP地址 ping 192.168.1.1 如果ping不通的话&#xff0c;可能是网络故障导致的。需要重启配置ip地址。配置文件 sudo vi /etc/network/interface 2. ping 8.8.8.8 如果ping不通的话&#xff0c;可能是路由器不能链接往外网&#xff1b; 或者路由器显示了当…

深入解析爬虫中的算法设计:提升效率与准确度

在网络爬虫&#xff08;Web Scraping&#xff09;中&#xff0c;设计高效、准确的算法是关键&#xff0c;尤其当面对大量数据或复杂的网站结构时&#xff0c;精心设计的爬虫算法能显著提高爬取速度并提升数据提取的准确性。本篇博客将详细讲解爬虫算法的设计与优化策略&#xf…

《C++设计模式》策略模式

文章目录 1、引言1.1 什么是策略模式1.2 策略模式的应用场景1.3 本文结构概览 2、策略模式的基本概念2.1 定义与结构2.2 核心角色解析2.2.1 策略接口&#xff08;Strategy&#xff09;2.2.2 具体策略实现&#xff08;ConcreteStrategy&#xff09;2.2.3 上下文&#xff08;Cont…

Spring源码分析之事件机制——观察者模式(一)

目录 事件基类定义 事件监听器接口 事件发布者接口及实现 事件广播器实现 小小总结 Spring源码分析之事件机制——观察者模式&#xff08;一&#xff09;-CSDN博客 Spring源码分析之事件机制——观察者模式&#xff08;二&#xff09;-CSDN博客 Spring源码分析之事件机制…

Spring Security(maven项目) 3.0.2.4版本

前言&#xff1a; 通过实践而发现真理&#xff0c;又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识&#xff0c;又从理性认识而能动地指导革命实践&#xff0c;改造主观世界和客观世界。实践、认识、再实践、再认识&#xff0c;这种形式&#xff0c;循环往…