elemnt ui --表单嵌套 二维数组动态校验

需求：

需要实现一个二维数组的表单验证，并对可编辑列进行必填及格式校验。

思路：

只要找到prop 里对应的关系值 ，就可以实现二维数组校验，以生产批号为例，:prpo="'materialList.'+scope.row.indexFa+'.subMaterialList.'+scope.row.index+'.productionBatch'",materialList为第一层数组，subMaterialList为第二层数组

这里不仅要校验夫层数组的生产批号值，也要校验子层数组中的生产批号值。所以在渲染之前对ruleData中的materialList进行遍历处理并把索引Set到每个item中，对有subMaterialList子集的进行再一次遍历并把索引Set到子集中的item里。

这样在每行自定义模板插值时，通过scope.row.父索引/子索引找数组中对应的字段值即可。

代码：

<el-form :model="ruleData" :rules="rules" ref="ruleForm">
                    <el-table 
                        border
                        :row-class-name="tableRowClassName" 
                        :header-cell-style="{background: '#f7f7f7',padding:'5px 10px'}"
                        max-height="350"
                        ref="multipleTable"
                        @select="handleSingleSelect"
                        @selection-change="handleSelectionChange"
                        row-key="onlyKeyId"
                        default-expand-all
                        :tree-props="{children: 'subMaterialList', hasChildren: 'hasChildren'}"
                        :data="ruleData.materialList">
                        <el-table-column 
                            type="selection"
                            width="55"
                            :selectable='selectEnable'
                            align="center">
                        </el-table-column>
                        <el-table-column align="center" label="生产批号" width="140px" >
                            <template  slot-scope="scope" >
                                <el-form-item label=" "
                                    v-if="scope.row.typeIs == 'child'"
                                    :rules="scope.row.isChecked?[{required: true,message: '生产批号不能为空'}]:[]"
                                    :prop="'materialList.'+scope.row.indexFa+'.subMaterialList.'+scope.row.index+'.productionBatch'"
                                    class="costValue">
                                    <el-input placeholder="请输入" style="margin:0;width:78%" v-model="scope.row.productionBatch"></el-input>
                                </el-form-item>
                                <el-form-item label=" "
                                    v-else 
                                    :rules="scope.row.isChecked?[{required: true,message: '生产批号不能为空'}]:[]"
                                    :prop="'materialList.'+scope.row.indexFa+'.productionBatch'"
                                    class="costValue">
                                    <el-input placeholder="请输入" style="margin:0;width:78%" v-model="scope.row.productionBatch"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="productionDate" label="生产日期"  width="150px" >
                            <template  slot-scope="scope" >
                                <el-form-item 
                                    v-if="scope.row.typeIs == 'child'"
                                    :prop="'materialList.'+scope.row.indexFa+'.subMaterialList.'+scope.row.index+'.productionDate'"
                                    :rules="scope.row.isChecked?[{required: true,message: '生产日期不能为空'}]:[]"
                                    class="costValue">
                                    <el-date-picker
                                        :clearable="false"
                                        style="width:130px"
                                        v-model="scope.row.productionDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                        </el-date-picker>
                                </el-form-item>
                                <el-form-item 
                                    v-else
                                    :prop="'materialList.'+scope.row.indexFa+'.productionDate'"
                                    :rules="scope.row.isChecked?[{required: true,message: '生产日期不能为空'}]:[]"
                                    class="costValue">
                                    <el-date-picker
                                        :clearable="false"
                                        style="width:130px"
                                        v-model="scope.row.productionDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                        </el-date-picker>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="effectiveDate" label="有效期" width="150px">
                            <template  slot-scope="scope" >
                                <el-form-item 
                                    v-if="scope.row.typeIs == 'child'"
                                    :prop="'materialList.'+scope.row.indexFa+'.subMaterialList.'+scope.row.index+'.effectiveDate'"
                                    :rules="scope.row.isChecked?[{required: true,message: '有效期不能为空'}]:[]"
                                    class="costValue">
                                    <el-date-picker
                                        :clearable="false"
                                        style="width:130px"
                                        v-model="scope.row.effectiveDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                        </el-date-picker>
                                </el-form-item>
                                <el-form-item 
                                    v-else
                                    :prop="'materialList.'+scope.row.indexFa+'.effectiveDate'"
                                    :rules="scope.row.isChecked?[{required: true,message: '有效期不能为空'}]:[]"
                                    class="costValue">
                                    <el-date-picker
                                        :clearable="false"
                                        style="width:130px"
                                        v-model="scope.row.effectiveDate"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                        </el-date-picker>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="registerCode" label="注册证号"  width="120px" >
                            <template slot-scope="scope" >
                                <el-form-item label=" "
                                    v-if="scope.row.typeIs == 'child'"
                                    :prop="'materialList.'+scope.row.indexFa+'.subMaterialList.'+scope.row.index+'.registerCode'"
                                    :rules="scope.row.isChecked?[{required: true,message: '注册证号不能为空'}]:[]"
                                    class="costValue">
                                    <el-input style="margin:0;width:78%" placeholder="请输入"  v-model="scope.row.registerCode"></el-input>
                                </el-form-item>
                                <el-form-item label=" "
                                    v-else
                                    :prop="'materialList.'+scope.row.indexFa+'.registerCode'"
                                    :rules="scope.row.isChecked?[{required: true,message: '注册证号不能为空'}]:[]"
                                    class="costValue">
                                    <el-input style="margin:0;width:78%" placeholder="请输入"  v-model="scope.row.registerCode"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="deliverNumber" label="发货数量" width="130px">
                            <template slot-scope="scope" >
                                <el-form-item label=" "
                                    v-if="scope.row.typeIs == 'child'"
                                    :prop="'materialList.'+scope.row.indexFa+'.subMaterialList.'+scope.row.index+'.deliverNumber'"
                                    :rules="scope.row.rule"
                                    class="costValue">
                                    <el-input 
                                        style="margin:0;width:78%" 
                                        placeholder="请输入" 
                                        v-model="scope.row.deliverNumber"
                                        :disabled="ruleData.isEdit"
                                        @change="handlerDeliverChange(scope.row)"></el-input>
                                </el-form-item>
                                <el-form-item label=" "
                                    v-else
                                    :prop="'materialList.'+scope.row.indexFa+'.deliverNumber'"
                                    :rules="rules.deliverNumber"
                                    class="costValue">
                                    <el-input 
                                        style="margin:0;width:78%" 
                                        placeholder="请输入" 
                                        :disabled="ruleData.isEdit"
                                        v-model="scope.row.deliverNumber"
                                        @change="handlerDeliverChange(scope.row)"></el-input>
                                </el-form-item>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-form>