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

A-sleep

已于 2023-11-17 09:10:16 修改

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

于 2023-11-16 16:25:59 首次发布

本文链接：https://blog.csdn.net/fellasleep/article/details/134444754

版权

本文介绍如何在Vue.js应用中结合Ant Design库动态创建表单，并详细阐述了进行表单验证的步骤和技巧，帮助开发者实现灵活且强大的前端表单管理功能。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<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>