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

Ant Design Form.List基础用法

使用 Form.List 使用

项目中需要在新增可以多个如图
在这里插入图片描述
代码如下

// An highlighted block
<Card title="产品信息" bordered={false}><Form.List name="productList" >{(fields, {add, remove}) => (<>{fields.map((field) => (<Row  gutter={16} >{/* 用得时候只需要修改下面,将需要重复展示的部分替换下面部分即可 注意 -----start*/ }<Col sm={24} md={12} lg={8} xxl={6}><Form.Item label="产品名称"{...field}name={[field.name,"wuMiao"]}rules={[{required: true,message: '请输入',},]}><Input placeholder="input placeholder" /></Form.Item></Col><Col sm={24} md={12} lg={8} xxl={6}><Form.Item {...field}label="物料编号"name={[field.name,"bianHao"]}rules={[{required: true,message: '请输入',},]}><Input placeholder="input placeholder" /></Form.Item></Col><Col sm={24} md={12} lg={8} xxl={6}><Form.Item {...field}label="借用数量"name={[field.name,"jNumber"]}rules={[{required: true,message: '请输入',},]}><InputNumber min={1} placeholder="请输入数量"style={{width:'100%'}} /></Form.Item></Col><Col sm={24} md={12} lg={8} xxl={6}><Form.Item {...field}label="提货方式"name={[field.name,"tType"]}rules={[{required: true,message: '请输入',},]}><Select><Select.Option value="you">邮寄</Select.Option><Select.Option value="zi">自提</Select.Option></Select></Form.Item></Col>{ /* 用得时候只需要修改下面,将需要重复展示的部分替换下面部分即可 -----end*/ }<div styleName="item_btn_wrap"><PlusCircleFilled styleName="add_item_btn" onClick={() => add({tType:'zi'})} />{fields.length>1&&<CloseCircleFilled  styleName="remove_item_btn" onClick={() => remove(field.name)} />}</div></Row>))}</>)}</Form.List></Card>

其中add 方法可以添加参数,为添加的默认参数

注意:

{…field} 一定要放在 name={[field.name,‘XXX’]} 的前面,否则就会出错
以上共勉

相关文章:

Ant Design Form.List基础用法

使用 Form.List 使用 项目中需要在新增可以多个如图 代码如下 // An highlighted block <Card title"产品信息" bordered{false}><Form.List name"productList" >{(fields, {add, remove}) > (<>{fields.map((field) > (<Ro…...

怎么优化H5让它可以在300ms以内打开?

移动端H5点击300毫秒延迟问题是由于浏览器为了区分单击和双击事件而导致的&#xff0c;通常会在点击后等待300毫秒以查看是否还会发生第二次点击。为解决这个问题&#xff0c;可以采取以下方法&#xff1a; 使用meta标签: 在HTML文档的头部添加以下meta标签来禁用缩放和调整浏览…...

Zabbix安装出现必要条件检查失败

问题描述 今天在某朋友部署新环境的Zabbix时&#xff0c;系统出现如下的检查失败情况。此环境的基础部分不是我负责&#xff0c;而是其它项目共存的PHP环境&#xff0c;也是挺奇怪的。一般来说&#xff0c;不应该将zabbix与其它系统部署在一起&#xff0c;没有条件哪怕时Docke…...

精通Maven的捷径:一文包揽所有必知必学

Maven是每个Java程序都会遇到的包管理工具&#xff0c;今天整理一下Maven的相关知识&#xff0c;从青铜到王者&#xff0c;一文全了解&#xff0c;我们开始吧&#xff01; 1、maven是什么&#xff0c;为什么存在&#xff1f;项目结构是什么样子&#xff0c;怎么定位jar 官方网…...

SpringCloud溯源——从单体架构到微服务Microservices架构 分布式和微服务 为啥要用微服务

前言 单体架构好好的&#xff0c;为啥要用微服务呢&#xff1f;微服务究竟是啥&#xff0c;怎么来的&#xff0c;有啥优缺点&#xff0c;本篇博客尝试追根溯源&#xff0c;阐述单体应用到分布式&#xff0c;微服务的演变,微服务架构的定义及优缺点&#xff0c;厘清相关的概念。…...

springboot 配置 servlet filter 2

springboot 配置 servlet filter 2 以配置Druid为例 Servlet WebServlet(urlPatterns "/druid/*",initParams {WebInitParam(name "loginUsername", value "admin"),// 登录用户名WebInitParam(name "loginPassword", value …...

前端axios下载导出文件工具封装

使用示例&#xff1a; import { fileDownload } from /utils/fileDownloadfileDownload({ url: process.env.VUE_APP_BASE_URL /statistic/pageList/export, method: post, data: data })工具类&#xff1a; import store from ../store/index import {getAccessToken } fro…...

Web应用防火墙的性能优化技术

Web应用防火墙&#xff08;WAF&#xff09;是企业网络安全的重要屏障&#xff0c;其性能直接影响到网络服务的质量和安全。本文详细探讨了WAF性能优化的几种技术&#xff0c;旨在为网络安全专业人员提供实用的参考。 规则优化 1.1 精简规则集 规则评估&#xff1a;定期评估规…...

华为HCIP题库h12-821题库新增30题

901、 &#xff08;多选题&#xff09;下面关于BGP中的公认属性的描述&#xff0c;正确的是 A、公认必属性是所有BGP路由器都识别&#xff0c;且必须存在于Updata消息中 B、BGP必须识别所有公认属性 C、公认属性分为公认必遵和可选过渡两种 D、公认任意属性是所有BGP造由器…...

智慧办公数据可视化大屏设计(数据可视化)、大数据、数据大屏、办公数据大屏、办公数据

本次分享的作品是用软件Axure8.0&#xff08;兼容9和10&#xff09;制作的智慧办公数据进行的可视化大屏设计&#xff0c;主要是针对办公的综合数据、工位数据、会议室数据、访客数据、能耗数据以及设备智控数据进行可视化数据分析。 1、综合分析:对办公室的整体数据、空气质量…...

echarts实现横轴刻度名倾斜展示,并且解决文字超出部分消失问题

需求背景&#xff1a; xAxis.axisLabel. interval如果不手动设值的话&#xff0c;默认就是‘auto’&#xff0c;会采用标签不重叠的策略间隔显示标签。当数据量特别大的时候&#xff0c;展示出来的刻度标签就会很少&#xff0c;导致用户体验不好。如下图所示&#xff1a; 如果…...

awk常用统计命令

统计列的某元素个数 # 统计第4列为0的个数 awk $4 0 { count } END { print count } your_file.txt awk $4 0 { print } your_file.txt # 第4列为0的行打印到屏幕 awk $4 0 your_file.txt...

Linux:【Kafka四】集群介绍与单机搭建

目录 环境简介 一、搭建kafka集群 1.1、复制出两个kafka的配置文件 1.2、修改配置文件中的如下属性 二、启动kafka集群 三、可校验kafka三个节点是否均启动成功 四、查看集群中主题的分区和副本 4.1、新建一个包含了分区和副本的主题 4.2、查看该主题的详细信息 五、…...

代码随想录算法训练营Day52|动态规划11

代码随想录算法训练营Day52|动态规划11 文章目录 代码随想录算法训练营Day52|动态规划11一、123.买卖股票的最佳时机III二、188.买卖股票的最佳时机IV 买卖股票 难 一、123.买卖股票的最佳时机III class Solution {public int maxProfit(int[] prices) {int[] dp new int[4]…...

Android渲染系列之原理概述篇

屏幕硬件 渲染离不开屏幕&#xff0c;Android中的屏幕碎片化比较严重&#xff0c;尺寸大小不一&#xff0c;材质也是屏幕重要的因素。 目前智能手机主流的屏幕可分为两大类即液晶显示器; LCD (Liquid Crystal Display) 液晶显示器OLED (Organic Light Emitting Diode&#xf…...

类图 UML从入门到放弃系列之二

1.劝退说明(开个玩笑) UML包含有许多小组件、修饰符以及其他小巧复杂的东西。UML的内容相当庞大&#xff0c;以至于你可以花大量的时间把自己修成一个UML语言律师&#xff0c;并能够完成所有律师能够完成的工作&#xff1a;编写出所有人都无法理解的文档。现在流行的敏捷开发倡…...

诊断用抗原抗体——博迈伦

抗原抗体诊断是一种常见的临床诊断方法&#xff0c;它通过检测人体内特定抗原或抗体的存在来确定某种疾病或感染的存在与否。这种诊断方法可以用于许多不同的疾病和感染的检测&#xff0c;如传染病、自身免疫病、肿瘤等。 抗原抗体诊断的原理是基于抗原与抗体之间的特异性反应。…...

156 - Ananagrams (UVA)

题目链接如下&#xff1a; Online Judge 我的代码如下&#xff1a; #include <iostream> #include <string> #include <vector> #include <map> #include <algorithm> // #define debugint main(){#ifdef debugfreopen("0.txt", &q…...

vue3入门

一. Vue3的优势 二. 使用create-vue搭建Vue3项目 2.1 认识create-vue create-vue是Vue官方新的脚手架工具&#xff0c;底层切换到了 vite &#xff08;下一代前端工具链&#xff09;&#xff0c;为开发提供极速响应 2.2 使用create-vue创建项目 前置条件 - 已安装16.0或更高版…...

上机实验二 设计单循环链表 西安石油大学数据结构

实验名称:设计单循环链表 (1&#xff09;实验目的:掌握线性表的链式存储结构;掌握单循环链表及其基本操作的实现。 (2&#xff09;主要内容:实现单循环链表的初始化、求数据元素个数、插入、删除、取数据元素等操作;用插入法建立带头结点的单循环链表;设计一个测试主函数验证…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...