Element中Form表单动态验证，两个完整示例

一、官网示例

核心部分就是 :prop=“‘domains.’ + index + ‘.value’”

<template>
	<el-form ref="formRef" :rules="rules" style="max-width: 600px" :model="dynamicValidateForm" label-width="auto" class="demo-dynamic">
		<el-form-item prop="email" label="邮箱" :rules="rules.email">
			<el-input v-model="dynamicValidateForm.email" />
		</el-form-item>
		<el-form-item
			v-for="(domain, index) in dynamicValidateForm.domains"
			:key="domain.key"
			:label="'域名' + index"
			:prop="'domains.' + index + '.value'"
			:rules="rules.domain"
		>
			<div class="" style="display: flex">
				<el-input v-model="domain.value" />
				<el-button style="margin-left: 10px" @click.prevent="removeDomain(domain)" type="danger" v-if="dynamicValidateForm.domains.length > 1">
					删除
				</el-button>
			</div>
		</el-form-item>
		<el-form-item>
			<el-button @click="addDomain" type="success">新增一行域名</el-button>
			<el-button type="primary" @click="submitForm(formRef)">提交</el-button>
			<el-button @click="resetForm(formRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';

const formRef = ref();
const rules = ref({
	email: [
		{
			required: true,
			message: '请输入邮箱地址',
			trigger: 'blur',
		},
		{
			type: 'email',
			message: '请输入正确格式的邮箱地址',
			trigger: ['blur', 'change'],
		},
	],
	domain: {
		required: true,
		message: '域名不能为空',
		trigger: 'blur',
	},
});
const dynamicValidateForm = reactive({
	domains: [
		{
			key: 1,
			value: '',
		},
	],
	email: '',
});

const removeDomain = (item) => {
	const index = dynamicValidateForm.domains.indexOf(item);
	if (index !== -1) {
		dynamicValidateForm.domains.splice(index, 1);
	}
};

const addDomain = () => {
	dynamicValidateForm.domains.push({
		key: Date.now(),
		value: '',
	});
};

const submitForm = (formEl) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!');
		}
	});
};

const resetForm = (formEl) => {
	if (!formEl) return;
	formEl.resetFields();
};
</script>

二、官网示例改动版本

核心部分 :prop=“index + ‘.value’” 与上面不同的是domains作为一个独立的对象，没有外层包裹。

<template>
	<el-form ref="formRef" :rules="rules" style="max-width: 600px" :model="domains" label-width="auto" class="demo-dynamic">
		<el-form-item
			v-for="(domain, index) in domains"
			:key="domain.key"
			:label="'域名' + index"
			:prop="index + '.value'"
			:rules="rules.domain"
		>
			<div class="" style="display: flex">
				<el-input v-model="domain.value" />
				<el-button style="margin-left: 10px" @click.prevent="removeDomain(domain)" type="danger" v-if="domains.length > 1"> 删除 </el-button>
			</div>
		</el-form-item>
		<el-form-item>
			<el-button @click="addDomain" type="success">新增一行域名</el-button>
			<el-button type="primary" @click="submitForm(formRef)">提交</el-button>
			<el-button @click="resetForm(formRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';

const formRef = ref();
const rules = ref({
	email: [
		{
			required: true,
			message: '请输入邮箱地址',
			trigger: 'blur',
		},
		{
			type: 'email',
			message: '请输入正确格式的邮箱地址',
			trigger: ['blur', 'change'],
		},
	],
	domain: {
		required: true,
		message: '域名不能为空',
		trigger: 'blur',
	},
});
const domains = reactive([
	{
		key: 1,
		value: '',
	},
]);

const removeDomain = (item) => {
	const index = domains.indexOf(item);
	if (index !== -1) {
		domains.splice(index, 1);
	}
};

const addDomain = () => {
	domains.push({
		key: Date.now(),
		value: '',
	});
};

const submitForm = (formEl) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!');
		}
	});
};

const resetForm = (formEl) => {
	if (!formEl) return;
	formEl.resetFields();
};
</script>