在写表单的时候，容易碰到这种嵌套表单的数据校验，并且这种表单是动态添加的，网上大部分的做法是表单套表单，实际上只需要一个表单就可以了。

为了方便观看，这里只列举了两条数据

多级表单嵌套校验

<el-form  ref="ruleFormRef"  :model="ruleForm.FormTable"  :rules="rules"  label-width="80px"  class="demo-ruleForm"  label-position="left"  :size="formSize"  status-icon  >   添加    <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' }]">

数据

// 为了演示嵌套校验，这里将列表数据嵌套在对象内部 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) }