antd的upload上传组件,上传成功后清除表单校验——基础积累

今天在写后台管理系统时,发现之前的一个bug,就是antdupload上传组件,需要进行表单校验。

在这里插入图片描述
直接上代码:

1.html部分

 <a-form-modelref="ruleForm":model="form":label-col="labelCol":wrapper-col="wrapperCol":rules="rules">xxxxxxxxx<a-form-model-item label="导入" prop="fileList" ref="upload"><a-uploadname="file":multiple="true"action="xxxxx/template-data"accept=".xlsx":customRequest="customRequest":fileList="form.fileList":remove="handleRemove"><a-button type="primary"><a-icon type="cloud-upload" /> 导入</a-button></a-upload></a-form-model-item>xxxxxxx
</a-form-model>

2.js部分

export default{data(){return{form:{},formData:null,rules: {quoteSupplierCode: [{ required: true, message: '请选择供应商', trigger: 'change' },],fileList: [{ required: true, message: '请上传文件', trigger: 'change' },],},}}
}

2.1 上传成功的方法——customRequest

customRequest(files) {let file = files.file;this.form.fileList = [file];this.$forceUpdate();this.formData = new FormData();this.formData.append('StreamContent', file);//this.$refs.ruleForm.clearValidate('fileList'); //清除图片校验文字——这个方法不生效delete this.rules['fileList'];
},

this.$refs.ruleForm.clearValidate(‘fileList’); //清除图片校验文字——这个方法不生效
delete this.rules[‘fileList’]; 这个是生效的,而且页面上 导入 字段左边还是有必填校验的,只是不会走校验而已

2.2 移除文件的方法——handleRemove

handleRemove() {this.form.fileList = [];this.formData = null;this.$forceUpdate();this.rules['fileList'] = {required: true,message: '请上传文件',trigger: 'change',};
},

2.3 表单校验方法——handleOk

handleOk() {const form = this.$refs.ruleForm;form.validate((valid) => {if (valid) {xxxxxx}})
}

3.注意:该页面/弹窗打开的时候,需要添加下面的代码,否则就直接没有文件导入的校验了!!!

我这边是弹窗,所以是在showModal方法里面写的:

showModal(ids) {this.visible = true;this.form = { ids: ids, isDelete: true, deliveryDays: 5 };this.$nextTick(() => {this.$refs.ruleForm.clearValidate();this.rules['fileList'] = {required: true,message: '请上传文件',trigger: 'change',};});
},

总结:使用clearValidate(['指定Prop'])或者clearValidate('指定Prop')是不生效的,然后我使用的方法就是上传文件成功后,将rules中的文件prop删除,也就是delete obj['指定prop'],然后在删除文件或者该页面第一次打开时,给rules添加指定prop的校验规则。

使用clearValidate(['指定Prop'])或者clearValidate('指定Prop')是不生效的,然后我使用的方法就是上传文件成功后,将rules中的文件prop删除,也就是delete obj['指定prop'],然后在删除文件或者该页面第一次打开时,给rules添加指定prop的校验规则

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

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

相关文章

通道剪枝channel pruning

1、相关定义 过参数化&#xff1a;主要是指在训练阶段&#xff0c;在数学上需要进行大量的微分求解&#xff0c;去捕捉数据中微小的变化信息&#xff0c;一旦完成迭代式的训练之后&#xff0c;网络模型在推理的时候就不需要这么多参数。剪枝算法&#xff1a;核心思想就是减少网…

基于DBC Signal Group生成Autosar SR接口(1)

文章目录 前言实现方法结构体在Simulink中的定义SignalGroup提取 总结 前言 在开发Autosar CAN通信模块时&#xff0c;对于Signal Group需要建立对应的Interface,其中的数据类型实际是一个结构体&#xff0c;包含Group中的Signal的数据类型定义。手动建立比较费时间&#xff0…

系统架构设计:8 论软件架构风格

目录 一 软件架构风格 1 数据流风格 (1)批处理风格 (2)管道-过滤器风格

C++中使用引用避免内存复制

C中使用引用避免内存复制 引用让您能够访问相应变量所在的内存单元&#xff0c;这使得编写函数时引用很有用。典型的函数声明类似于下面这样&#xff1a; ReturnType DoSomething(Type parameter);调用函数 DoSomething() 的代码类似于下面这样&#xff1a; ReturnType Resu…

基于OpenCV设计的流媒体播放器(RTSP、RTMP)

一、前言 随着互联网的普及和发展,流媒体技术已成为日常生活中不可或缺的一部分。流媒体播放器作为流媒体技术的重要组成部分,其性能和功能直接影响到用户的观影体验。本文介绍使用OpenCV和Qt设计一款流媒体播放器,专门用于播放直播视频流,例如RTSP、RTMP。该播放器只播放…

项目进展(十)-解决ADS1285在调试时出现的问题

一、解决大坑 在项目进展&#xff08;九&#xff09;-完善ADS1285代码这边博客中&#xff0c;看似解决了问题&#xff0c;可以去读数据&#xff0c;但是其实是给自己挖大坑&#xff0c;这边博客就是来填坑的。   首先呢&#xff0c;上篇博客说的是用0x12指令来读取数据&#…

Transformer模型 | Python实现TransformerCPI模型(pytorch)

文章目录 效果一览文章概述程序设计参考资料效果一览 文章概述 Python实现TransformerCPI模型(tensorflow) Dependencies: python 3.6 pytorch >= 1.2.0 numpy RDkit = 2019.03.3.0 pandas Gensim >=3.4.0 程序设计 import torch import numpy as np import random …

Qt QList类和QLinkedList类 详解

一、QList 类 对于不同的数据类型&#xff0c;QList<T>采取不同的存储策略&#xff0c;存储策略如下&#xff1a; 如果T 是一个指针类型或指针大小的基本类型(该基本类型占有的字节数和指针类型占有的字节数相同)&#xff0c;QList<T>将数值直接存储在它的数组当…

WPF中, 如何将控件的触发事件绑定到ViewModel

在DataGrid 等控件中, 有很多这种带闪电符号的触发事件. 如果用传统的事件驱动, 则直接在后台中建立 一个private PropertyChanged(Sender s, EventAgars Args) 即可. 但是如果需要绑定到ViewModel的话? 应该怎么做? 带闪电符号的触发事件 实现viewModel绑定前端触发事件的…

day58:ARMday5,GPIO流水灯实验

汇编指令&#xff1a; .text .global _start _start: 1.设置GPIOE GPIOF寄存器的时钟使能 RCC_MP_AHB4ENSETR[5:4]->1 0x50000a28 LDR R0,0x50000a28 LDR R1,[R0] ORR R1,R1,#(0x3<<4) STR R1,[R0]2.设置PE10、PF10、PE8管脚为输出模式&#xff0c;GPIOE_MODER[21…

常见SQL错误用法案例和总结

1. LIMIT 语句 分页查询是最常用的场景之一&#xff0c;但也通常也是最容易出问题的地方。比如对于下面简单的语句&#xff0c;一般DBA想到的办法是在type, name, create_time字段上加组合索引。这样条件排序都能有效的利用到索引&#xff0c;性能迅速提升。 SELECT * FROM …

Jenkins+Allure+Pytest的持续集成

一、配置 allure 环境变量 1、下载 allure是一个命令行工具&#xff0c;可以去 github 下载最新版&#xff1a;https://github.com/allure-framework/allure2/releases 2、解压到本地 3、配置环境变量 复制路径如&#xff1a;F:\allure-2.13.7\bin 环境变量、Path、添加 F:\a…

华为C语言编程规范(2W字总结)

1、代码总体原则 1、清晰第一 清晰性是易于维护、易于重构的程序必需具备的特征。代码首先是给人读的&#xff0c;好的代码应当可以像文章一样发声朗诵出来。 目前软件维护期成本占整个生命周期成本的40%~90%。根据业界经验&#xff0c;维护期变更代码的成本&#xff0c;小型…

全栈开发笔记1:首个项目的收获

本文为编程导航实战项目学习笔记。 文章目录 7.跨域问题解决 2023.10.26.项目部署 2023.10.15.统一处理返回值 2023.10.14.开发注册和用户管理 2023.09303.开发登陆注册接口 2023.09.172.数据库设计1.前后端初始化 2023.9.16 7.跨域问题解决 2023.10.2 三种方式&#xff1a; …

用c语言实现静态通讯录

思路&#xff1a; 将代码分成三个模块&#xff0c;头文件contact.h&#xff1a;声明函数&#xff0c;定义结构体 test.c测试类&#xff0c;contact.c用来实现通讯录中的函数功能 1.打印菜单&#xff0c;让用户进行选择 2.定义一个结构体PeoInfo&#xff0c;其中包含联系人的…

OCR让点读笔如虎添翼

点读笔是一种智能学习工具&#xff0c;它可以通过识别文字来提供相应的语音或图像反馈。在实现文字识别功能时&#xff0c;点读笔通常会借助OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;技术。下面将详细介绍点读笔如何利用OCR技术实现文…

【Spring Cloud系统】- Zookeer特性与使用场景

【Spring Cloud系统】- Zookeer特性与使用场景 一、概述 Zookeeper是一个分布式服务框架&#xff0c;是Apache Hadoop的一个子项目&#xff0c;它主要是用来解决分布式应用中经常遇到的一些数据管理问题。如&#xff1a;统一命名服务、状态同步服务、集群管理、分布式应用配置…

Python的logging模块Demo

Tip&#xff1a;默认情况下&#xff0c;logging模块不会自动地将日志存储到某个特定路径&#xff0c;除非你指定了该路径。你需要创建一个FileHandler&#xff0c;然后为其设置一个文件路径&#xff0c;这样日志就会被写入到该文件中。 以下是一个简单的例子&#xff0c;展示如…

Android开发入门技能(Java)

Android开发入门技能 一些流行的框架和库 安卓开发中有许多主流框架和库&#xff0c;它们可以帮助开发者更轻松地构建功能强大、高效和可维护的应用程序。以下是一些主要的安卓开发框架和库&#xff1a; Android Jetpack&#xff1a;Android Jetpack是官方提供的一套库和工具…

基于AlexNet深度学习网络的智能垃圾分类系统matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1、基于AlexNet深度学习网络的智能垃圾分类系统概述 4.2、基于AlexNet深度学习网络的智能垃圾分类系统主要原理 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab20…