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.hqwc.cn/news/189217.html

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

相关文章

<Linux>(极简关键、省时省力)《Linux操作系统原理分析之Linux 进程管理 4》(8)

《Linux操作系统原理分析之Linux 进程管理 4》&#xff08;8&#xff09; 4 Linux 进程管理4.4 Linux 进程的创建和撤销4.4.1 Linux 进程的族亲关系4.4.2 Linux 进程的创建4.4.3 Linux 进程创建的过程4.4.4 Linux 进程的执行4.4.5 Linux 进程的终止和撤销 4 Linux 进程管理 4.…

关于CSDN右上角的消息数显示

最近一段时间CSDN总是出一下小问题&#xff0c;要么网页访问无响应宕机&#xff0c;要么已发表的文章今天写的时候又出现在草稿箱里&#xff0c;待编辑页面里。今天发现右上角的未读消息也是消除不了。 越点越多。 按道理&#xff0c;CSDN这么大的公司&#xff0c;中国最大的程…

dataGridView 嵌套ComboBox对单元格精准绑定数据

1&#xff0c;数据准备并绑定数据 List<P> list new List<P>();for (int i 0; i < 3; i){P data new P();data.Idx i 1;data.Name "名称" i;list.Add(data);}dataGridView1.DataSource list;dataGridView1.Refresh(); 2&#xff0c;对单元格…

248: vue+openlayers 以静态图片作为底图,并在上面绘制矢量多边形

第248个 点击查看专栏目录 本示例是演示如何在vue+openlayers项目中以静态图片作为底图,并在上面绘制矢量多边形。这里主要通过pixels的坐标作为投射,将静态图片作为底图,然后通过正常的方式在地图上显示多边形。注意的是左下角为[0,0]。 直接复制下面的 vue+openlayers源代…

获取用户详细信息

pojo.user&#xff1a;JsonIgnore注解作用忽略密码属性&#xff0c;返回给用户的信息不能有敏感属性密码 package com.lin.springboot01.pojo;import com.fasterxml.jackson.annotation.JsonIgnore; import lombok.Data;import java.time.LocalDateTime;Data public class Use…

vim模式用法总结

0.前言 我们用gcc编译文件的时候&#xff0c;如果发生了下面的错误&#xff0c;那么如何用vim打开的时候就定位到&#xff1f; 我们可以知道&#xff0c;这是第6行出现了错误&#xff1b; 所以我们使用vim打开的时候多输入个这个&#xff0c;我们就可以快速定位了 vim test.c 6…

【观察】华为:数智世界“一触即达”,应对数智化转型“千变万化”

毫无疑问&#xff0c;数智化既是这个时代前进所趋&#xff0c;也是国家战略所指&#xff0c;更是所有企业未来发展进程中达成的高度共识。 但也要看到&#xff0c;由于大量新兴技术的出现&#xff0c;技术热点不停的轮转&#xff0c;加上市场环境的快速变化&#xff0c;让数智化…

使用vant list实现订单列表,支持下拉加载更多

在公司项目开发时&#xff0c;有一个需求是实现可以分页的订单列表&#xff0c;由于是移动端项目&#xff0c;所以最好的解决方法是做下拉加载更多。 1.在页面中使用vant组件 <van-listv-model"loading":finished"finished"finished-text"没有更…

Android 当中的 Fragment 协作解耦方式

Android 当中的 Fragment 协作解耦方式 文章目录 Android 当中的 Fragment 协作解耦方式第一章 前言介绍第01节 遇到的问题第02节 绘图说明 第二章 核心代码第01节 代理人接口第02节 中间人 Activity第03节 开发者A第04节 开发者B第05节 测试类 第一章 前言介绍 第01节 遇到的…

使用 React Flow 构建一个思维导图应用

思维导图是围绕共同主题或问题将思想、概念、信息或任务分组的视觉表示。思维导图应用是一种软件应用&#xff0c;允许您创建、可视化和组织您的思想、想法和信息作为思维导图。本文将向您展示如何实现自己的思维导图应用程序。 在我们开始之前&#xff0c;我想向您展示一下我们…

JAXB的XmlElement注解

依赖 如果基于JAX-WS开发&#xff0c;可以在maven工程的pom.xml文件中增加如下依赖&#xff0c;会将依赖的JAXB库也下载下来&#xff1a; <dependency><groupId>jakarta.xml.ws</groupId><artifactId>jakarta.xml.ws-api</artifactId><vers…

Android 屏幕适配

目录 一、为什么要适配 二、几个重要的概念 2.1 屏幕尺寸 2.2 屏幕分辨率 2.3 屏幕像素密度 2.4 屏幕尺寸、分辨率、像素密度三者关系 三、常用单位 3.1 密度无关像素(dp) 3.2 独立比例像素&#xff08;sp&#xff09; 3.3 dp与px的转换 四、解决方案 4.1 今日头条…