vue + antd 动态增加表单并进行表单校验

在这里插入图片描述

<template>
	<a-modal
		v-model:visible="visible"
		:title="formData.id ? '编辑渠道' : '添加渠道'"
		:width="850"
		:mask-closable="false"
		:destroy-on-close="true"
		@ok="onSubmit"
		@cancel="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-form-item label="渠道名称" name="name">
				<a-input v-model:value="formData.name" placeholder="请输入渠道名称" allow-clear />
			</a-form-item>
			<a-form-item label="渠道编码" name="code">
				<a-input v-model:value="formData.code" placeholder="请输入渠道编码" allow-clear />
			</a-form-item>
			<a-form-item
				v-for="(item, index) in formData.ipWhite"
				:key="item.key"
				v-bind="index === 0 ? formItemLayout : {}"
				:label="index === 0 ? 'IP白名单(最多添加五个)' : ''"
				:name="['ipWhite', index, 'value']"
				:rules="{
					required: true,
					message: '请输入IP白名单',
					trigger: ['change', 'blur']
				}"
			>
				<div class="w-[100%] flex">
					<a-input v-model:value="item.value" placeholder="请输入IP白名单" class="mr-3" style="width: 95%" />
					<MinusCircleOutlined
						v-if="formData.ipWhite.length > 1"
						class="dynamic-delete-button w-[5%]"
						@click="removeDomain(item)"
					/>
				</div>
			</a-form-item>
			<a-form-item v-bind="formItemLayoutWithOutLabel">
				<a-button type="dashed" :disabled="addState" style="width: 30%" @click="addipWhite">
					<PlusOutlined />
					添加白名单
				</a-button>
			</a-form-item>
			

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android SmartTable根据int状态格式化文字及颜色

private void initData() {List<UserInfo> list new ArrayList<>();list.add(new UserInfo("一年级", "李同学", 6, 1, 120, 1100, 450, 0));list.add(new UserInfo("一年级", "张同学", 6, 2, 120, 1100, 450, 1));list…

高转化率的软文都有哪些要素?媒介盒子分享

信息爆炸的时代下用户注意力成为稀缺资源&#xff0c;网络上的各个平台充斥着信息流广告的痕迹&#xff0c;在海量信息内容中&#xff0c;企业想要吸引用户注意力&#xff0c;提高转化率&#xff0c;就需要不断更新文案创意&#xff0c;今天媒介盒子就来分享&#xff1a;高转化…

关于漏洞怎么挖/SRC刷分技巧

Google谷歌爬虫WebRobot自动化SQL检测 这里先用之前的谷歌爬虫爬取足够多的url链接 我这里爬了差不多600条 再打开WebRobot工具,这个会发给大家 它的UI是这样的&#xff0c;里面集成了许多其它小工具&#xff0c;都可以使用 点击注入检测 右键导入URL文件即可 这四个选项…

SOLIDWORKS Electrical工程属性配置与图框

导读 很多工程师都是直接使用现有的图框&#xff0c;但是现有图框会遇到一些问题&#xff0c;自己想显示的内容不知道怎么设置出来&#xff0c;或者是图纸显示的内容太繁杂&#xff0c;行列号不符合自己的习惯。这些问题都是关于图框模板的设计。 一、关于工程属性设计的问题…

井盖位移监测,智能井盖智慧监测方式

在推动城市向智能化和高效化方向发展的过程中&#xff0c;科学技术发挥着至关重要的作用。智能井盖传感器作为科学技术进步的产物&#xff0c;正逐渐在城市管理过程之中崭露头角。这些看似不起眼的设备&#xff0c;虽然隐藏在井盖下方不被人们看到&#xff0c;但实实在在为人民…

html书本翻页效果,浪漫表白日记本(附源码)

文章目录 1.设计来源1.1 书本正面1.2 界面1-21.3 界面3-41.4 界面5-61.5 界面7-81.6 界面9-101.7 界面11-121.8 书本结尾 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/1…

基于MS16F3211芯片的触摸控制灯的状态变化和亮度控制(11.16)

电路板原理图 触摸脚选择&#xff1a;PB1、PB2、PB3、PB4、PB5 这里我感觉触摸脚PB5应该是PB0。 程序结构 程序逻辑 其实就是在HS16F3211_TkLib.c中存在与触摸相关的函数&#xff0c;然后在 每个按键封装一个专门对这个按键按下或者松开不同的状态执行不同的操作。 在main.c里…

Michael.W基于Foundry精读Openzeppelin第38期——AccessControlEnumerable.sol

Michael.W基于Foundry精读Openzeppelin第38期——AccessControlEnumerable.sol 0. 版本0.1 AccessControlEnumerable.sol 1. 目标合约2. 代码精读2.1 supportsInterface(bytes4 interfaceId)2.2 _grantRole(bytes32 role, address account)2.3 _revokeRole(bytes32 role, addre…

ERP智能管理系统:智能化的未来之路

ERP智能管理系统&#xff1a;智能化的未来之路 科技飞速发展&#xff0c;人工智能(AI)和大数据等先进技术的应用正在改变着企业的运营模式。其中&#xff0c;ERP智能管理系统在帮助企业实现智能化运营、提高效率、降低成本等方面发挥着越来越重要的作用。本文将为您详细介绍ERP…

有什么好用的后勤管理软件?学校后勤服务要怎么提升满意度?

后勤服务是院校管理中的重要一环&#xff0c;直接影响到师生的工作、学习和生活质量。师生作为学校的核心用户&#xff0c;对后勤服务的质量和满意度有着深刻的体验和感受。因此&#xff0c;他们的评价对于提升学校品牌形象、提高服务质量以及改进学校管理具有至关重要的作用。…

《rPPG》——(1)PyTorch——Windows环境配置

《rPPG》——&#xff08;1&#xff09;PyTorch——Windows环境配置 如何查看电脑是否已安装Python环境以及Python版本 anaconda对应python3.8的版本号是多少? 截止到我的知识截止日期&#xff08;2022年1月&#xff09;&#xff0c;Anaconda支持Python 3.8的版本号是Anacond…

易点易动固定资产管理系统场景应用二:集成本地OA/BPM系统

在企业的日常运营中&#xff0c;固定资产管理是一项重要的任务。为了实现高效的工作流程和准确的审批流程&#xff0c;易点易动固定资产管理系统提供了与本地OA/BPM系统的集成功能。本文将重点介绍易点易动固定资产管理系统在集成本地OA/BPM系统方面的应用场景&#xff0c;以帮…

html实现图片裁剪处理(附源码)

文章目录 1.设计来源1.1 主界面1.2 裁剪界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134455169 html实现图片裁剪处理(附源码)&#xff0c;支持图片放大缩小&#…

Snipaste 截图悬浮工具【实用教程】

下载安装 Snipaste windows64位版本下载链接&#xff1a;https://pan.baidu.com/s/1i2L3JHxOGqkmX3lj2fUVHA?pwdeut6 无需安装&#xff0c;解压后即可使用 其他版本见官网 https://zh.snipaste.com/download.html 启动 Snipaste 双击解压后文件夹 Snipaste-2.8.8-Beta-x64 中…

亲测一款超实用的在线制作产品册工具,一看就会

最近&#xff0c;我一直在寻找一款简单易用的在线制作产品册工具&#xff0c;终于让我找到了一个超实用的神器&#xff01;这款工具不仅功能强大&#xff0c;而且操作简单&#xff0c;一看就会。 首先&#xff0c;这款工具提供了丰富的模板和素材&#xff0c;用户可以根据自己的…

linux网络编程之TCP协议编程

Linux网络编程之TCP协议编程 tcp协议编程模型socket函数sockaddr_inbindlistenconnect 应用服务端代码客服端代码 TCP协议编程) tcp协议编程模型 Server 1.创建socket (socket函数) 2.确定服务器协议地址簇 (struct sockaddr) 3.绑定 (bind) 4.监听 ( listen) 5.接受客户端连接…

编译安装redis及配置多实例

yum安装是这种十分简单的方法我们就不在提及了&#xff0c;今天我们来做一下redis的编译安装 Redis源码包官方下载链接&#xff1a;http://download.redis.io/releases/ 一、编译安装&#xff1a; 安装依赖包 dnf -y install make gcc jemalloc-devel systemd-devel如果是…

Appium移动自动化测试--安装Appium

Appium 自动化测试是很早之前就想学习和研究的技术了&#xff0c;可是一直抽不出一块完整的时间来做这件事儿。现在终于有了。 反观各种互联网的招聘移动测试成了主流&#xff0c;如果再不去学习移动自动化测试技术将会被淘汰。 web自动化测试的路线是这样的&#xff1a;编程语…

java:IDEA中的Scratches and Consoles

背景 IntelliJ IDEA中的Scratches and Consoles是一种临时的文件编辑环境&#xff0c;用于写一些文本内容或者代码片段。 其中&#xff0c;Scratch files拥有完整的运行和debug功能&#xff0c;这些文件需要指定编程语言类型并且指定后缀。 举例&#xff1a;调接口 可以看到…

干扰项目成本估算精准度的5大因素

干扰项目成本估算精准度的因素有很多&#xff0c;这些因素可能导致成本估算的不准确性&#xff0c;增加成本偏差和额外的成本投入&#xff0c;从而对项目的进度和预算产生影响。因此&#xff0c;在进行项目成本估算时&#xff0c;需要充分考虑这些因素&#xff0c;并采取相应的…
最新文章