当前位置: 首页 > news >正文

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表单校验+数据回显问题

情景问题&#xff1a;新增表单有时间区域选择&#xff0c;选择了时间&#xff0c;还是提示必填的校验提示语&#xff0c;且修改时&#xff0c;通过 号赋值法&#xff0c;重新选择此时间范围无效。 解决方法&#xff1a;&#xff08;重点&#xff09; widthHoldTime:[]&#xf…...

LeetCode 面试题 01.02. 判定是否互为字符重排

文章目录 一、题目二、C# 题解 ​ 一、题目 给定两个由小写字母组成的字符串 s1 和 s2&#xff0c;请编写一个程序&#xff0c;确定其中一个字符串的字符重新排列后&#xff0c;能否变成另一个字符串&#xff0c;点击此处跳转。 示例 1&#xff1a; 输入: s1 “abc”, s2 “…...

学习maven工具

文章目录 &#x1f412;个人主页&#x1f3c5;JavaEE系列专栏&#x1f4d6;前言&#xff1a;&#x1f3e8;maven工具产生的背景&#x1f993;maven简介&#x1fa80;pom.xml文件(project object Model 项目对象模型) &#x1fa82;maven工具安装步骤两个前提&#xff1a;下载 m…...

手机直播源码开发,协议讨论篇(三):RTMP实时消息传输协议

实时消息传输协议RTMP简介 RTMP又称实时消息传输协议&#xff0c;是一种实时通信协议。在当今数字化时代&#xff0c;手机直播源码平台为全球用户进行服务&#xff0c;如何才能增加用户&#xff0c;提升用户黏性&#xff1f;就需要让一对一直播平台能够为用户提供优质的体验。…...

【JavaEE基础学习打卡05】JDBC之基本入门就可以了

目录 前言一、JDBC学习前说明1.Java SE中JDBC2.JDBC版本 二、JDBC基本概念1.JDBC原理2.JDBC组件 三、JDBC基本编程步骤1.JDBC操作的数据库准备2.JDBC操作数据库表步骤 四、代码优化1.简单优化2.with-resources探讨 总结 前言 &#x1f4dc; 本系列教程适用于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 可以通过配置实体类的注解来自动添加创建时间和更新时间&#xff0c;这可以减轻一定的开发量。 1 在实体类中添加注解 public class User {TableId(type IdType.AUTO)private Long id;private String username;private String password;TableField(fill FieldF…...

解决vue2项目在IE11浏览器中无画面的兼容问题

解决vue2项目在IE11浏览器中无画面的兼容问题 背景介绍当前网上能找打的教程 背景介绍 当前项目面临其他浏览器都可以运行&#xff0c;但是在IE11浏览器中出现白屏的现象&#xff0c;F12后台也没有报错&#xff0c;项目月底也要交付了。当前项目的vue版本为2.6.11&#xff0c;…...

信号

信号也是IPC中的一种&#xff0c;是和管道&#xff0c;消息队列&#xff0c;共享内存并列的概念。 本文参考&#xff1a; Linux中的信号_linux中信号_wolf鬼刀的博客-CSDN博客 Linux系统编程&#xff08;信号处理 sigacation函数和sigqueue函数 )_花落已飘的博客-CSDN博客 Linu…...

产品经理的真实薪资有多少?今天带你看看

作为产品经理&#xff0c;除了需要拥有扎实的技术背景和出色的产品设计能力&#xff0c;还需具备出色的领导力和商业敏感度。因此&#xff0c;产品经理的薪资也越来越成为人们关注的话题。那么&#xff0c;一般来说&#xff0c;产品经理的薪资水平如何呢&#xff1f; 薪资多少…...

《一个操作系统的实现》windows用vm安装CentOS——从bochs环境搭建到第一个demo跑通

vm安装CentOS虚拟机带有桌面的版本。su输入密码123456。更新yum -y update 。一般已经安装好后面这2个工具&#xff1a;yum install -y net-tools wget。看下ip地址ifconfig&#xff0c;然后本地终端连接ssh root192.168.249.132输入密码即可&#xff0c;主要是为了复制网址方便…...

线程Thread

文章目录 一、概念1、进程2、线程3、CPU与线程的关系4、并行、并发5、线程的生命周期 二、创建1、继承Thread2、实现Runnable接口3、实现Callable接口 三、API1、获取运行使用的线程2、唯一标识3、线程名4、优先级5、是否处于活动状态6、守护线程7、join1、API2、有无join对比 …...

如何使用CSS实现一个渐变背景效果?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现渐变背景效果⭐ 线性渐变&#xff08;Linear Gradient&#xff09;⭐ 径向渐变&#xff08;Radial Gradient&#xff09;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订…...

初始C语言(7)——详细讲解有关初阶指针的内容

系列文章目录 第一章 “C“浒传——初识C语言&#xff08;1&#xff09;&#xff08;更适合初学者体质哦&#xff01;&#xff09; 第二章 初始C语言&#xff08;2&#xff09;——详细认识分支语句和循环语句以及他们的易错点 第三章 初阶C语言&#xff08;3&#xff09;——…...

ArcGIS Pro技术应用(暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用)

GIS是利用电子计算机及其外部设备&#xff0c;采集、存储、分析和描述整个或部分地球表面与空间信息系统。简单地讲&#xff0c;它是在一定的地域内&#xff0c;将地理空间信息和 一些与该地域地理信息相关的属性信息结合起来&#xff0c;达到对地理和属性信息的综合管理。GIS的…...

RISC-V公测平台发布 · 数据库在RISC-V服务器上的适配评估

前言 上一期讲到YCSB在RISC-V服务器上对MySQL进行性能测试&#xff08;RISC-V公测平台发布 使用YCSB测试SG2042上的MySQL性能&#xff09;&#xff0c;在这一期文章中&#xff0c;我们继续深入讨论RISC-V数据库的应用。本期就继续利用HS-2平台来测试数据库软件在RISC-V服务器…...

UE5.2 LyraDemo源码阅读笔记(五)输入系统

Lyra里使用了增强输入系统&#xff0c;首先知道增强输入系统里的三个类型配置。 一、Input Actions (IA)&#xff1a; 输入操作带来的变量&#xff0c;与玩家的输入组件绑定&#xff0c;回调里驱动玩家行为。 二、InputMappingContext&#xff08;IMC&#xff09;&#xff1a…...

线段树详解——影子宽度

OK&#xff0c;今天来讲一讲线段树~~ 线段树是什么线段树的实现线段树的时间复杂度线段树的应用线段树的节点结构其他操作和优化例题——影子宽度输入输出格式输入格式输出格式 输入输出样例输入样例输出样例 例题讲解 线段树是什么 线段树&#xff08; S e g m e n t Segmen…...

使用R语言绘制折线图

写在前面 昨天我们分享了使用Python绘制折线图的教程,跟着NC学作图 | 使用python绘制折线图,考虑到很多同学基本不使用Python绘图。那么,我们也使用R语言复现此图形。 此外,在前期的教程中,我们基本没有分享过折线图的教程。因此,我们在这里也制作一期关于折线图的教程。…...

无涯教程-Perl - wantarray函数

描述 如果当前正在执行的函数的context正在寻找列表值,则此函数返回true。在标量context中返回false。 语法 以下是此函数的简单语法- wantarray返回值 如果没有context,则此函数返回undef&#xff1b;如果lvalue需要标量,则该函数返回0。 例 以下是显示其基本用法的示例…...

GLM-4-9B-Chat-1M惊艳效果:输入50万字小说,精准定位伏笔与人物关系图谱

GLM-4-9B-Chat-1M惊艳效果&#xff1a;输入50万字小说&#xff0c;精准定位伏笔与人物关系图谱 1. 百万长文处理新标杆 想象一下&#xff0c;你手头有一部50万字的网络小说&#xff0c;想要找出所有埋设的伏笔线索&#xff0c;理清复杂的人物关系网。传统方法可能需要花费数天…...

别再搞混了!AUTOSAR通信栈里,PduR和CanTp到底为谁打工?一个DCM诊断请求的完整旅程

AUTOSAR通信栈揭秘&#xff1a;诊断请求如何穿越PduR与CanTp的迷宫 在汽车电子系统的开发中&#xff0c;诊断通信就像车辆的"健康检查系统"&#xff0c;而AUTOSAR架构中的通信栈则是确保这些诊断命令能够准确传达的神经网络。许多工程师第一次接触AUTOSAR通信栈时&am…...

域适应实战:如何用Python快速实现图像风格迁移(附代码)

域适应实战&#xff1a;Python实现图像风格迁移的工程化解决方案 当你在巴黎街头用手机拍摄埃菲尔铁塔时&#xff0c;是否想过让它瞬间拥有梵高《星月夜》的笔触质感&#xff1f;这种看似魔法的技术背后&#xff0c;是域适应技术在计算机视觉领域的精妙应用。不同于简单的滤镜叠…...

用Image-to-Video为你的图片注入灵魂:动态效果生成全攻略

用Image-to-Video为你的图片注入灵魂&#xff1a;动态效果生成全攻略 1. 引言&#xff1a;让静态图片动起来 想象一下&#xff0c;你拍了一张完美的风景照&#xff0c;但总觉得少了点什么——如果云能飘动、树叶能摇曳、水面能泛起波纹&#xff0c;那该多好&#xff1f;这就是…...

Squeezer安全最佳实践:保护区块链dApp的10个关键点

Squeezer安全最佳实践&#xff1a;保护区块链dApp的10个关键点 【免费下载链接】squeezer Squeezer Framework - Build serverless dApps 项目地址: https://gitcode.com/gh_mirrors/sq/squeezer Squeezer Framework作为构建无服务器区块链去中心化应用&#xff08;dApp…...

如何快速掌握React Email Editor:深入理解拖拽邮件编辑器的实现原理

如何快速掌握React Email Editor&#xff1a;深入理解拖拽邮件编辑器的实现原理 【免费下载链接】react-email-editor Drag-n-Drop Email Editor Component for React.js 项目地址: https://gitcode.com/gh_mirrors/re/react-email-editor React Email Editor是一个功能…...

如何在macOS上制作Windows启动盘:WinDiskWriter终极指南

如何在macOS上制作Windows启动盘&#xff1a;WinDiskWriter终极指南 【免费下载链接】windiskwriter &#x1f5a5; A macOS app that creates bootable USB drives for Windows. &#x1f6e0; Patches Windows 11 to bypass TPM and Secure Boot requirements. 项目地址: h…...

4个强大的开源工具功能扩展方案

4个强大的开源工具功能扩展方案 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial request limit. / Too many fre…...

MybatisPlus分页插件PaginationInnerInterceptor原理解析与实战配置指南

MybatisPlus分页插件PaginationInnerInterceptor深度剖析与高效实践 当你在Spring Boot项目中处理海量数据时&#xff0c;分页查询就像给数据装上精准导航——而MybatisPlus的PaginationInnerInterceptor正是这个导航系统的核心引擎。不同于简单配置就能用的工具类&#xff0c;…...

制造业数据库选型实战:为什么我们从 MySQL 迁移到 TiDB

写在前面 作为一个制造业数字化团队的开发负责人&#xff0c;我最怕听到的一句话就是&#xff1a;“数据库又慢了”。 MOM 平台上线 4 年&#xff0c;数据量从最初的几百 G 涨到几个 T。每次月底报表、跨工厂查询&#xff0c;系统就开始”喘气”。加索引、拆表、优化 SQL………...