el-date-picker 时间区域选择,type=daterange,form表单校验+数据回显问题
情景+问题:新增表单有时间区域选择,选择了时间,还是提示必填的校验提示语,且修改时,通过 =号赋值法,重新选择此时间范围无效。
解决方法:(重点)
-
widthHoldTime:[],要定义到deal_form对象里面。不要拿出来单独定义。入参时不需要 ,可以通过delete 方法删除。
-
修改时,要通过this.$set()赋值。
html
<el-form ref="dealForm" :model="deal_form" :rules="deal_form_rules" label-width="130px"><el-form-item label="合同开始-终止时间" prop="widthHoldTime"><el-date-picker v-model="deal_form.widthHoldTime" value-format="yyyy-MM-dd" type="daterange"range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :clearable='false' /></el-form-item>
</el-form>
js
<script>export default {data() {return {deal_form_rules: {// 手机号校验agentPhone: [{required: true,message: "请输入代办人电话",trigger: "blur"}, {required: true,pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,message: '请输入正确的手机号码',trigger: 'blur',}],// 生效起始时间-终止时间,时间范围校验widthHoldTime: [{required: true,message: "请选择合同开始-终止时间",trigger: "blur"}],}}},methods: {// 新增open_add() {this.deal_obj.open = truethis.deal_obj.title = '新增'this.deal_form = {agentPhone: null, //手机号startTime: null, // 起始时间endTime: null, //终止时间widthHoldTime: [] //起始时间 - 终止时间,* 注意:此数据要放到 deal_form form表格字段里面,不然无法校验(即校验规则无法生效)};this.$nextTick(() => {this.$refs["dealForm"].resetFields();})},// 修改 - 查询修改信息,并赋值到 el-form 表格中edit_withhold(row) {getWidthhold(row.contractId).then(res => {if (res.code == 200) {this.$nextTick(() => {if (this.$refs["dealForm"]) this.$refs["dealForm"].resetFields();})this.deal_obj.title = '修改'this.deal_form = res.data;this.$set(this.deal_form, 'widthHoldTime', [res.data.startTime, res.data.endTime]) // * 注意:要用 $set 方法赋值才可修改。不然只能展示,无法重新选择/更新值。this.deal_obj.open = true} else {this._err(res.msg)}});},// 新增/修改 - 提交submit_dealForm() {this.$refs["dealForm"].validate(valid => {if (valid) {// 将 widthHoldTime 时间区域的值,赋值给传入后端的 起始、终止(startTime,endTime)两个子弹中,并删除入参中多余的 widthHoldTime 字段let params = {}Object.assign(params, this.deal_form);[params.startTime, params.endTime] = params.widthHoldTime;delete params.widthHoldTime// 调用接口提交if (this.deal_obj.title == '修改') {// 调用修改接口,do something} else {// 调用新增接口,do something}}});},}}
</script>
相关文章:
el-date-picker 时间区域选择,type=daterange,form表单校验+数据回显问题
情景问题:新增表单有时间区域选择,选择了时间,还是提示必填的校验提示语,且修改时,通过 号赋值法,重新选择此时间范围无效。 解决方法:(重点) widthHoldTime:[]…...
LeetCode 面试题 01.02. 判定是否互为字符重排
文章目录 一、题目二、C# 题解 一、题目 给定两个由小写字母组成的字符串 s1 和 s2,请编写一个程序,确定其中一个字符串的字符重新排列后,能否变成另一个字符串,点击此处跳转。 示例 1: 输入: s1 “abc”, s2 “…...
学习maven工具
文章目录 🐒个人主页🏅JavaEE系列专栏📖前言:🏨maven工具产生的背景🦓maven简介🪀pom.xml文件(project object Model 项目对象模型) 🪂maven工具安装步骤两个前提:下载 m…...
手机直播源码开发,协议讨论篇(三):RTMP实时消息传输协议
实时消息传输协议RTMP简介 RTMP又称实时消息传输协议,是一种实时通信协议。在当今数字化时代,手机直播源码平台为全球用户进行服务,如何才能增加用户,提升用户黏性?就需要让一对一直播平台能够为用户提供优质的体验。…...
【JavaEE基础学习打卡05】JDBC之基本入门就可以了
目录 前言一、JDBC学习前说明1.Java SE中JDBC2.JDBC版本 二、JDBC基本概念1.JDBC原理2.JDBC组件 三、JDBC基本编程步骤1.JDBC操作的数据库准备2.JDBC操作数据库表步骤 四、代码优化1.简单优化2.with-resources探讨 总结 前言 📜 本系列教程适用于JavaWeb初学者、爱好…...
2023/8/16 华为云OCR识别驾驶证、行驶证
目录 一、 注册华为云账号开通识别驾驶证、行驶证服务 二、编写配置文件 2.1、配置秘钥 2.2、 编写配置工具类 三、接口测试 3.1、测试接口 3.2、结果 四、实际工作中遇到的问题 4.1、前端传值问题 4.2、后端获取数据问题 4.3、使用openfeign调用接口报错 4.3、前端显示问题…...
【Java开发】 Mybatis-Plus 07:创建时间、更新时间自动添加
Mybatis-Plus 可以通过配置实体类的注解来自动添加创建时间和更新时间,这可以减轻一定的开发量。 1 在实体类中添加注解 public class User {TableId(type IdType.AUTO)private Long id;private String username;private String password;TableField(fill FieldF…...
解决vue2项目在IE11浏览器中无画面的兼容问题
解决vue2项目在IE11浏览器中无画面的兼容问题 背景介绍当前网上能找打的教程 背景介绍 当前项目面临其他浏览器都可以运行,但是在IE11浏览器中出现白屏的现象,F12后台也没有报错,项目月底也要交付了。当前项目的vue版本为2.6.11,…...
信号
信号也是IPC中的一种,是和管道,消息队列,共享内存并列的概念。 本文参考: Linux中的信号_linux中信号_wolf鬼刀的博客-CSDN博客 Linux系统编程(信号处理 sigacation函数和sigqueue函数 )_花落已飘的博客-CSDN博客 Linu…...
产品经理的真实薪资有多少?今天带你看看
作为产品经理,除了需要拥有扎实的技术背景和出色的产品设计能力,还需具备出色的领导力和商业敏感度。因此,产品经理的薪资也越来越成为人们关注的话题。那么,一般来说,产品经理的薪资水平如何呢? 薪资多少…...
《一个操作系统的实现》windows用vm安装CentOS——从bochs环境搭建到第一个demo跑通
vm安装CentOS虚拟机带有桌面的版本。su输入密码123456。更新yum -y update 。一般已经安装好后面这2个工具:yum install -y net-tools wget。看下ip地址ifconfig,然后本地终端连接ssh root192.168.249.132输入密码即可,主要是为了复制网址方便…...
线程Thread
文章目录 一、概念1、进程2、线程3、CPU与线程的关系4、并行、并发5、线程的生命周期 二、创建1、继承Thread2、实现Runnable接口3、实现Callable接口 三、API1、获取运行使用的线程2、唯一标识3、线程名4、优先级5、是否处于活动状态6、守护线程7、join1、API2、有无join对比 …...
如何使用CSS实现一个渐变背景效果?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现渐变背景效果⭐ 线性渐变(Linear Gradient)⭐ 径向渐变(Radial Gradient)⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订…...
初始C语言(7)——详细讲解有关初阶指针的内容
系列文章目录 第一章 “C“浒传——初识C语言(1)(更适合初学者体质哦!) 第二章 初始C语言(2)——详细认识分支语句和循环语句以及他们的易错点 第三章 初阶C语言(3)——…...
ArcGIS Pro技术应用(暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用)
GIS是利用电子计算机及其外部设备,采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲,它是在一定的地域内,将地理空间信息和 一些与该地域地理信息相关的属性信息结合起来,达到对地理和属性信息的综合管理。GIS的…...
RISC-V公测平台发布 · 数据库在RISC-V服务器上的适配评估
前言 上一期讲到YCSB在RISC-V服务器上对MySQL进行性能测试(RISC-V公测平台发布 使用YCSB测试SG2042上的MySQL性能),在这一期文章中,我们继续深入讨论RISC-V数据库的应用。本期就继续利用HS-2平台来测试数据库软件在RISC-V服务器…...
UE5.2 LyraDemo源码阅读笔记(五)输入系统
Lyra里使用了增强输入系统,首先知道增强输入系统里的三个类型配置。 一、Input Actions (IA): 输入操作带来的变量,与玩家的输入组件绑定,回调里驱动玩家行为。 二、InputMappingContext(IMC):…...
线段树详解——影子宽度
OK,今天来讲一讲线段树~~ 线段树是什么线段树的实现线段树的时间复杂度线段树的应用线段树的节点结构其他操作和优化例题——影子宽度输入输出格式输入格式输出格式 输入输出样例输入样例输出样例 例题讲解 线段树是什么 线段树( S e g m e n t Segmen…...
使用R语言绘制折线图
写在前面 昨天我们分享了使用Python绘制折线图的教程,跟着NC学作图 | 使用python绘制折线图,考虑到很多同学基本不使用Python绘图。那么,我们也使用R语言复现此图形。 此外,在前期的教程中,我们基本没有分享过折线图的教程。因此,我们在这里也制作一期关于折线图的教程。…...
无涯教程-Perl - wantarray函数
描述 如果当前正在执行的函数的context正在寻找列表值,则此函数返回true。在标量context中返回false。 语法 以下是此函数的简单语法- wantarray返回值 如果没有context,则此函数返回undef;如果lvalue需要标量,则该函数返回0。 例 以下是显示其基本用法的示例…...
PDF-Parser-1.0智能办公:告别手动复制粘贴的PDF处理方案
PDF-Parser-1.0智能办公:告别手动复制粘贴的PDF处理方案 1. 为什么需要智能PDF解析工具 在日常办公场景中,PDF文档处理是一个高频且痛苦的工作环节。根据统计,职场人士平均每周需要处理15-20份PDF文件,包括合同、报告、发票等各…...
HarmonyOS6 半年磨一剑 - RcTextarea 组件核心架构与类型系统设计
文章目录前言一、组件整体架构1.1 文件结构1.2 装饰器体系二、类型系统深度解析2.1 边框模式类型2.2 清空触发类型2.3 格式化与解析函数类型2.4 文本对齐与回车键类型三、核心参数体系3.1 必传参数3.2 尺寸相关参数3.3 功能开关参数四、内部状态与生命周期4.1 内部状态设计4.2 …...
极客专属:OpenClaw+百川2-13B打造个人CLI智能助手
极客专属:OpenClaw百川2-13B打造个人CLI智能助手 1. 为什么开发者需要命令行智能助手 作为一个长期与终端打交道的开发者,我每天要重复执行大量机械操作:查看日志、运行测试、整理结果。这些工作虽然简单,却极其消耗精力。直到我…...
制造业数据库选型实战:为什么我们从 MySQL 迁移到 TiDB
写在前面 作为一个制造业数字化团队的开发负责人,我最怕听到的一句话就是:“数据库又慢了”。 MOM 平台上线 4 年,数据量从最初的几百 G 涨到几个 T。每次月底报表、跨工厂查询,系统就开始”喘气”。加索引、拆表、优化 SQL………...
R语言新手必看:clusterProfiler功能富集分析从安装到实战(附常见报错解决方案)
R语言实战:clusterProfiler功能富集分析全流程指南 第一次接触功能富集分析时,我被那些密密麻麻的基因列表和复杂的生物学术语搞得晕头转向。直到发现了clusterProfiler这个神器,它就像生物信息学分析中的瑞士军刀,把复杂的富集过…...
老牌CMS的隐痛:从DedeCMS漏洞看开源系统会员模块的安全设计误区
DedeCMS会员模块漏洞剖析:开源系统安全设计的深层反思 当一款拥有百万级安装量的老牌CMS系统曝出前台任意密码修改漏洞时,我们看到的不仅是一个具体的技术缺陷,更是开源项目在安全架构设计上的系统性隐忧。2018年那场影响广泛的DedeCMS漏洞事…...
K230 vs树莓派视觉套件:300元预算该选谁?实测对比工业检测场景
K230与树莓派视觉套件:300元预算下的工业检测实战对比 在工业自动化浪潮中,视觉检测系统正从大型企业向中小型制造车间快速渗透。当预算被严格限制在300元区间时,K230开发板与树莓派摄像头组合成为最受关注的两种解决方案。我们历时三个月在6…...
实测才敢推 AI论文工具推荐:2026最新测评与使用体验
2026年真正好用的AI论文工具,核心看生成的论文质量、低AI味、格式正确、学术适配四大指标。综合实测,千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队,覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 一、…...
RT-DETR实战入门:从环境搭建到YOLO数据集转换COCO格式
1. RT-DETR环境搭建:避坑指南 刚接触RT-DETR时,环境配置是最容易翻车的第一关。我最初尝试时,因为没注意torch版本兼容性问题,浪费了整整两天时间。这里分享几个关键细节: 首先是PyTorch版本选择。官方推荐使用torch 2…...
离网逆变器下垂控制实战:从公式推导到MATLAB仿真(附资源下载)
离网逆变器下垂控制实战:从公式推导到MATLAB仿真 在新能源发电系统中,离网逆变器的稳定运行至关重要。传统电压电流双闭环控制虽然简单直接,但在面对复杂负载变化时,往往会出现电压跌落、频率失稳等问题。下垂控制技术通过模拟同…...
