在写表单的时候，容易碰到这种嵌套表单的数据校验，并且这种表单是动态添加的，网上大部分的做法是表单套表单，实际上只需要一个表单就可以了。
为了方便观看，这里只列举了两条数据
多级表单嵌套校验
<el-form ref="ruleFormRef" :model="ruleForm.FormTable" :rules="rules" label-width="80px" class="demo-ruleForm" label-position="left" :size="formSize" status-icon > <div class="addFrom"> <el-button @click="addGoodsInfo"><el-icon><Plus /></el-icon>添加</el-button> <div class="addFrom_box" v-for="(item,index) in ruleForm.FormTable.goodsDetail" :key="index"> <!-- 嵌套检验 --> <el-form-item label="商品编号" :prop="`goodsDetail.`+index+`.name`" :rules="[{ required: true, message: '请输入商品编号', trigger: 'blur' }]" > <el-form-item label="商品数量" :prop="`goodsDetail.`+index+`.goodsNum`" :rules="[{ required: true, message: '请输入商品数量', trigger: 'blur' }]"> <el-input-number :min="1" :max="10" v-model="item.goodsNum" placeholder="请输入" /> </el-form-item> <el-input clearable v-model="item.name" placeholder="请输入商品编号" /> </el-form-item> </div> </div> </el-form>
数据
// 为了演示嵌套校验，这里将列表数据嵌套在对象内部 const ruleForm = reactive({ FormTable:{ name: 'fanction', // 嵌套的列表数据 goodsDetail : [ {id:null,name:null,goodsNum:null,store:null} ] } })
此处的数据里是一个对象内套了一个数组对象，正常情况下，校验是通过prop对module里面的数据进行校验，但此处是数组，数据在数组内部，所以用一般的prop指定数据名是校验不了的，这里用的是
:prop=“
goodsDetail.+index+.name”
只需要在prop中指定到当前数据在module里的位置即可。此处的goodsDetail就是v-for中ruleForm.FormTable.goodsDetail的最后面一位，向下寻找，goodsDetail[index].name就是当前的数据，只不过这里改成了xxx.xxx.xxx的链式写法。
校验规则写在el-form-item上面：
:rules=“[{ required: true, message: ‘请输入商品编号’, trigger: ‘blur’ }]”
动态添加，只需要给数组末尾添加一个空对象即可。
// 添加按钮 const addGoodsInfo = () => { ruleForm.FormTable.goodsDetail.push({id:null,name:null,goodsNum:null,store:null})
动态删除，给当前条添加一个点击事件，找到当前条删除。
// 删除按钮 const deleteGodos = (index : number) => { console.log(index); ruleForm.FormTable.goodsDetail.splice(index,1) }
