element 嵌套验证

 

 

如上图所示，首先有个form表单，在form表单里面还套了个表格

先看一下，我们 form 表单数据的结构

form表单里面的每一项都要做校验，schoolEpidemicPersonReport 是对应的表格数据， 表格里面的也要做校验

思路

第一，外面的验证，直接在 form 组件上一次性传递所有的验证规则就好了，注意 prop 和 rules 里面的属性对应上就可以了

第二，表格里面的校验，rules定义的时候必须要有准确且唯一的名称，表格里面主要是靠index区分的，所以定义不了，只能在单个的表单域上传递属性的验证规则

关键代码

<el-form-item :prop="'schoolEpidemicPersonReport.' + scope.$index + '.epiPersonName'" :rules="{required: true, message: '请输入姓名', trigger: 'blur'}">

所有代码

    <!-- :model="ruleForm"  form表单的数据 -->
    <!-- :rules="rules"    校验的规则 -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="20px" class="demo-ruleForm">
      <el-form-item label=""