element form表单循环校验（动态绑定的数据)

本文链接：https://blog.csdn.net/weixin_43743175/article/details/126537096

一层循环嵌套时

<el-form :model="addform"
         ref="addform"
         :rules="rules">
  <el-form-item required
                label="姓名"
                v-for="(item, index) in addform.resourceList"
                :key="index"
                :prop="`resourceList.${index}.name`"
                :rules="rules.name">
    <el-input v-model="item.name"></el-input>
  </el-form-item>
</el-form>

data数据结构及校验规则

data() {
    return {
        addform: {
            resourceList: [{
                name: ''
            }]
        },
        rules: {
            name: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
            }]
        },
    }
},

prop应该写成如 :prop="'resourceList.' + index + '.name'"
prop格式为 '遍历的数组 . ' + 下标index + ' . 实际需要校验的key'

多层循环嵌套时

<el-form :model="formData" :rules="rules" ref="ruleForm">
	<div v-for="(item, index) in formData.oneCycle" :key="index">
		<el-form-item label="姓名" :prop="`oneCycle.${index}.name`" :rules="rules.name">
			<el-input v-model="item.name"></el-input>
		</el-form-item>
		<div v-for="(itemSon, indexSon) in item.towCycle" :key="indexSon">
			<el-form-item label="性别" :prop="`oneCycle.${index}.towCycle.${indexSon}.sex`" :rules="rules.towCycle.sex">
				<el-input v-model="itemSon.sex"></el-input>
			</el-form-item>
			<el-form-item label="年龄" :prop="`oneCycle.${index}.towCycle.${indexSon}.age`" :rules="rules.towCycle.age">
				<el-input v-model="itemSon.age"></el-input>
			</el-form-item>
		</div>
	</div>
</el-form>

data数据结构及校验规则

data() {
    return {
        formData: {
            oneCycle: [{
                name: '',
                towCycle: [{
                    sex: '',
                    age: ''
                }]
            }]
        },
        rules: {
            name: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
            }],
            towCycle: {
                sex: [{
                    required: true,
                    message: '请输入性别',
                    trigger: 'blur'
                }],
                age: [{
                    required: true,
                    message: '请输入年龄',
                    trigger: 'blur'
                }]
            }
        },
    }
},

prop应该写成如 :prop="'oneCycle.' + index + '.towCycle' + indexSon + ‘.sex’"
prop格式为 '遍历的一级数组 . ' + 下标index + ‘.遍历的二级数组’+ 二级数组下标index + ' . 实际需要校验的key'