表单验证-多层数据结构情况下

一、注意prop的结构要跟数据结构保持一直

<el-form :model="formData" :rules="rules">
	<div v-for="(itemA, indexA) in formData" :key="indexA">
		<el-form-item label="姓名" :prop="indexA + '.name'" :rules="rules.name">
			<el-input v-model="itemA.name">el-input>
		el-form-item>
		<el-form-item label="性别" :prop="indexA + '.sex'" :rules="rules.sex">
			<el-select v-model="itemA.sex" filterable clearable>
				<el-option label="男" value="1">el-option>
				<el-option label="女" value="2">el-option>
			el-select>
		el-form-item>
		<div v-for="(cItem, cIndex) in itemA.infoList" :key="cIndex">
			<el-form-item label="入学时间" :prop="indexA + '.infoList.' + cIndex + '.enrollmentTime'" :rules="rules.enrollmentTime">
				<el-date-picker v-model="formData.enrollmentTime" value-format="YYYYMMDD" type="date">el-date-picker>
			el-form-item>
			<el-form-item label="年级" :prop="indexA + '.infoList.' + cIndex + '.grade'" :rules="rules.grade">
				<el-input v-model="itemA.grade">el-input>
			el-form-item>
		div>
	div>
el-form>

const state = reactive<any>({
	formData:[{
		name:'',
		sex:'',
		infoList:[
			enrollmentTime：'',
			grade:''
		}
	]，
	rules:{
		name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
		sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
		enrollmentTime: [{ required: true, message: '入学时间不能为空', trigger: 'change' }],
		grade: [
			{ required: true, message: '年级不能为空', trigger: 'blur' },
			{ validator: gradeFun, trigger: 'blur' },
		],
	}
})