需求：

需要實現一個二維陣列的表單驗證，並對可編輯列進行必填及格式校驗。

思路：

只要找到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>