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

<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>
			
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44