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

在这里插入图片描述

<template><a-modalv-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-itemv-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%" /><MinusCircleOutlinedv-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.rhkb.cn/news/194755.html

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

相关文章

vue-组件生命周期+网络请求

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue-组件生命周期网络请求 目录 组件生命周期 1. Vue的生命周期 2. Vue 子组件和父组件执行顺序…

数据结构 链表

单链表&#xff1a;单链表用来写邻接表&#xff0c;邻接表用来存储图和树 双链表&#xff1a;用来优化某些问题 单链表 链式存储 #include<stdio.h> #include<stdlib.h> int cont 0; //结构体 typedef struct List { int data; //数据域 struct List* next; //…

(免费领源码)基于Vue+Node.js的宠物领养网站的设计与开发83352-计算机毕业设计项目选题推荐

摘 要 随着互联网大趋势的到来&#xff0c;社会的方方面面&#xff0c;各行各业都在考虑利用互联网作为媒介将自己的信息更及时有效地推广出去&#xff0c;而其中最好的方式就是建立网络管理系统&#xff0c;并对其进行信息管理。由于现在网络的发达&#xff0c;宠物领养网站的…

2023.11.15 hive sql之函数标准,字符串,日期,数学函数

目录 一.函数分类标准 二.查看官方函数,与简单演示 三.3种类型函数演示 四.字符串函数 1.常见字符串函数 2.索引函数 解析函数 五.日期函数 1.获取当前时间 2.获取日期相关 3.周,季度等计算 4.时间戳 六.数学函数 一.函数分类标准 目前hive三大标准 UDF:&#xff08…

餐厅订座预约小程序的效果如何

市场中无论哪种城市&#xff0c;餐厅非常多&#xff0c;一条不长的商业街&#xff0c;汇聚着数家餐饮品牌&#xff0c;且相互间竞争激烈&#xff0c;并且各个商家都希望用成本低高效率的方法引流及转化。 随着互联网深入各个行业&#xff0c;传统餐饮行业经营痛点不少。 传统餐…

MAC地址注册的网络安全影响和措施分析

MAC地址注册对网络安全具有重要影响&#xff0c;同时也需要采取相应的措施来应对潜在的安全风险。以下是有关MAC地址注册的网络安全影响和应对措施的分析&#xff1a; 影响&#xff1a; 1. 身份验证&#xff1a;MAC地址注册可用于设备的身份验证&#xff0c;但MAC地址本身并不…

VUE基础的一些实战总结

目录 创建一个 Vue 应用 步骤 1&#xff1a;安装 Node.js 和 npm 步骤 2&#xff1a;安装 Vue CLI 步骤 3&#xff1a;创建 Vue 项目 步骤 4&#xff1a;启动开发服务器 步骤 5&#xff1a;访问应用程序 步骤 6&#xff1a;编辑 Vue 应用 步骤 7&#xff1a;构建和部署…

互联网+智慧河道大数据一体化管理平台解决方案:PPT43页,附下载

关键词&#xff1a;售前方案工程师&#xff0c;解决方案工程师&#xff0c;技术转售前&#xff0c;技术转售前的优势&#xff0c;软件工程师转售前 一、智慧水务大数据一体化建设背景 1、当前我国供水管网迅速扩张&#xff0c;管理压力加大&#xff0c;供水管网漏损率比较高&…

[Jenkins] Docker 安装Jenkins及迁移流程

系统要求 最低推荐配置: 256MB可用内存1GB可用磁盘空间(作为一个Docker容器运行jenkins的话推荐10GB) 为小团队推荐的硬件配置: 1GB可用内存50 GB 可用磁盘空间 软件配置: Java 8—无论是Java运行时环境&#xff08;JRE&#xff09;还是Java开发工具包&#xff08;JDK&#xff…

如何将图片转为excel或word?(客户端)

演示软件&#xff1a;金鸣表格文字识别大师3.6.1&#xff08;新版本界面可能会略有不同&#xff09; 第一部分 将图片转为excel或文表混合的word 一般的软件要将图片转为可编辑的excel&#xff0c;都需要待识别的图片要有明显清晰的表格线&#xff0c;但我们程序现已克服了这…

051-第三代软件开发-日志容量时间限制

第三代软件开发-日志容量时间限制 文章目录 第三代软件开发-日志容量时间限制项目介绍日志容量时间限制 关键字&#xff1a; Qt、 Qml、 Time、 容量、 大小 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项目结合了 QML&#xff08;Qt Meta-Object Language…

【QT HTTP】使用QtNetwork模块制作基于HTTP请求的C/S架构

目录 0 引言1 HTTP基本知识1.1 请求类型1.2 HTTP请求报文格式1.3 HTTP响应报文格式1.4 拓展&#xff1a;GET vs POST 请求方法GET请求请求报文&#xff1a;响应报文 POST请求请求报文响应报文 其他注意事项示例&#xff1a;GET请求示例POST请求示例 2 实战2.1 QtNetwork模块介绍…

【PIE-Engine 数据资源】8天合成LAI产品(MOD15A2H.006)

文章目录 一、 简介二、描述三、波段四、属性五、示例代码参考资料 【PIE-Engine 数据资源】xxx 一、 简介 数据名称8天合成LAI产品(MOD15A2H.006)时间范围2000年-现在空间范围全球数据来源NASA代码片段var images pie.ImageCollection(“USGS/MOD15A2H/006”) 二、描述 全球…

云ES使用集群限流插件(aliyun-qos)

aliyun-qos插件是阿里云Elasticsearch团队自研的插件,能够提高集群的稳定性。该插件能够实现集群级别的读写限流,在关键时刻对指定索引降级,将流量控制在合适范围内。例如当上游业务无法进行流量控制时,尤其对于读请求业务,可根据aliyun-qos插件设置的规则,按照业务的优先…

深度学习入门(第四天)——递归神经网络与词向量原理解读

一、RNN网络架构解读 常规神经网络并不能考虑时间序列的特征&#xff08;比如前天昨天今天或者带有前后关联的特征&#xff09;&#xff0c;现在每个特征都是独立考虑的&#xff0c;那么如果有这样的特征&#xff0c;网络应该怎么学呢 而递归递归网络hidden这里的转回箭头&…

【电路笔记】-快速了解无源器件

快速了解无源器件 文章目录 快速了解无源器件1、概述2、电阻器作为无源器件3、电感器作为无源器件4、电容器作为无源器件5、总结 无源器件是电子电路的主要构建模块&#xff0c;没有它们&#xff0c;这些电路要么根本无法工作&#xff0c;要么变得不稳定。 1、概述 那么什么是…

MAC地址_MAC地址格式_以太网的MAC帧_基础知识

MAC地址 全世界的每块网卡在出厂前都有一个唯一的代码,称为介质访问控制(MAC)地址 一.网络适配器(网卡) 要将计算机连接到以太网&#xff0c;需要使用相应的网络适配器(Adapter)&#xff0c;网络适配器一般简称为“网卡”。在计算机内部&#xff0c;网卡与CPU之间的通信&…

kafka分布式安装部署

1.集群规划 2.集群部署 官方下载地址&#xff1a;http://kafka.apache.org/downloads.html &#xff08;1&#xff09;上传并解压安装包 [zhangflink9wmwtivvjuibcd2e package]$ tar -zxvf kafka_2.12-3.3.1.tgz -C ../software/&#xff08;2&#xff09;修改解压后的文件…

2023年中国疗养院收入规模、疗养院数量及利润统计[图]

疗养院是运用疗养为主要手段&#xff0c;专门为疾病康复疗养和健康疗养而设立的医疗、预防和保健机构。疗养院通过提供物理治疗(如水疗、光疗)&#xff0c;并配合饮食、体操等疗法&#xff0c;利用自然疗养因子和人工疗养因子作用于人体&#xff0c;达到预防、保健、矫治和康复…

JUNIT使用和注意、以及断言的介绍使用、SpringBoot Test测试类的使用、maven配置使用junit详细介绍

参考文章&#xff1a; https://www.cnblogs.com/zhukaile/p/14514238.html&#xff0c;https://blog.csdn.net/qq_36448800/article/details/126438339 一、什么是单元测试 在平时的开发当中&#xff0c;一个项目往往包含了大量的方法&#xff0c;可能有成千上万个。如何去保…