element 嵌套验证

骑猪看日落 2022-10-28 03:52 107阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

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

## 思路 ##

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

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

### 关键代码 ###

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

### 所有代码 ###

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="20px" class="demo-ruleForm">
          <el-form-item label="" prop="schoolEpidemicReport.epiInschSickStunum">
            <div class="question"><span class="red">* </span>1. 老师人数</div>
            <div class="left">
              <el-input prefix-icon="el-icon-user" oninput="if(value<0) value=0;" type="number" v-model="ruleForm.schoolEpidemicReport.epiInschSickStunum"></el-input>
            </div>
          </el-form-item>
    
          <el-form-item label="" prop="schoolEpidemicReport.epiInchinaStuteanum">
            <div class="question"><span class="red">* </span>2. 是否有学员</div>
            <el-radio-group class="left" v-model="ruleForm.schoolEpidemicReport.epiInchinaStuteanum" @change="tableFlagChange">
                <el-radio key="1" :label="1" value="1">是</el-radio>
                <el-radio key="0" :label="0" value="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="" prop="schoolEpidemicReport.schoolEpidemicPersonReport">
            <div class="question"><span class="red">* </span>3. 学员明细</div>
            <el-scrollbar class='leftt' style='height: 104%;'>
              <el-table :data="ruleForm.schoolEpidemicPersonReport" style="width: 100%" border>
                <el-table-column prop="address" label="姓名"  align="center">
                  <template slot-scope='scope'>
                    <el-form-item 
                    :prop="'schoolEpidemicPersonReport.' + scope.$index + '.epiPersonName'" :rules="{required: true, message: '请输入姓名', trigger: 'blur'}">
                      <el-input v-model="ruleForm.schoolEpidemicPersonReport[scope.$index].epiPersonName" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column prop="date" label="班级" align="center">
                  <template slot-scope='scope'>
                    <el-form-item 
                    :prop="'schoolEpidemicPersonReport.' + scope.$index + '.epiPersonClassname'" :rules="{required: true, message: '请输入班级', trigger: 'blur'}">
                      <el-input v-model="ruleForm.schoolEpidemicPersonReport[scope.$index].epiPersonClassname" placeholder="请输入班级"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </el-form-item>
          <el-form-item style="margin-top: 80px;margin-bottom: 80px;">
            <el-button :disabled="disabled" type="primary" @click="submitForm('ruleForm')">立即上报</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>

这是草稿箱里的文章，没写完，今天补全

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20221024/c7563250fdd64203a107cdad7828b302.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20221024/88e6c89068fb45498412219a1a78887f.png