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

news/2024/11/25 2:48:37/

在这里插入图片描述

<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.ppmy.cn/news/1227945.html

相关文章

华为OD机试 - 转盘寿司(Java JS Python C)

目录 题目描述 输入描述 输出描述 用例 题目解析 JS算法源码 Java算法源码

开发知识点-Git

团队协作-Git Giteegitee 创建仓库打开项目所在目录&#xff0c;右键选择Git Bush Here(你要确定电脑上已经安装了Git&#xff09;初始化本地仓库配置验证信息。 完美解决github访问速度慢介绍Git 与 SVN 区别IDEA 添加 gitee Gitee Git Gitee 大家都知道国内访问 Github 速度…

服务容错之限流之 Tomcat 限流 Tomcat 线程池的拒绝策略

在文章开头&#xff0c;先和大家抛出两个问题&#xff1a; 每次提到服务限流为什么都不考虑基于 Tomcat 来做呢&#xff1f;大家有遇到过 Tomcat 线程池触发了拒绝策略吗&#xff1f; JUC 线程池 在谈 Tomcat 的线程池前&#xff0c;先看一下 JUC 中线程池的执行流程&#x…

springcloudalibaba-3

一、Nacos Config入门 1. 搭建nacos环境【使用现有的nacos环境即可】 使用之前的即可 2. 在微服务中引入nacos的依赖 <!-- nacos配置依赖 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-…

map与set的封装

目录 红黑树的结点 与 红黑树的迭代器 红黑树的实现&#xff1a; 迭代器&#xff1a; ​编辑 红黑树的查找&#xff1a; 红黑树的插入&#xff1a; ​编辑 检查红色结点&#xff1a;​编辑红黑树的左旋 ​编辑红黑树的右旋 ​编辑红黑树的双旋 Map的封装 ​编辑set的…

SpirngBoot + Vue 前后端分离开发工具代码

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…

C# Array和ArrayList有什么区别

在C#中&#xff0c;Array和ArrayList是集合类型&#xff0c;用于存储一组元素&#xff0c;但它们之间有几个关键区别&#xff1a; 类型安全&#xff1a; Array是类型安全的&#xff0c;意味着它只能存储一种特定类型的元素。例如&#xff0c;一个int[]数组只能存储int类型的元素…

FPGA设计时序约束八、others类约束之Set_Case_Analysis

目录 一、序言 二、Set Case Analysis 2.1 基本概念 2.2 设置界面 2.3 命令语法 2.4 命令示例 三、工程示例 四、参考资料 一、序言 在Vivado的时序约束窗口中&#xff0c;存在一类特殊的约束&#xff0c;划分在others目录下&#xff0c;可用于设置忽略或修改默认的时序…