element-ui的el-table和el-form嵌套使用表單校驗

表格中嵌套使用表單驗證

表格是el-table自動獲取的后台數據，每行都有el-input的驗證，這樣一個rules的規則就不能匹配到每一行，所以要是用動態的prop和rules規則

需求如下，要對告警閾值進行驗證

廢話不多說，上代碼

<el-form :model="paramsForm"
                                 ref="rForm"
                                 :rules="paramsForm.paramsRules">
                            <el-table
                                :data="paramsForm.params"
                                style="width: 100%">
                                <el-table-column
                                    label="檢測類型"
                                    align="center"
                                    width="160">
                                    <template slot-scope="scope">
                                        <span>{{ scope.row.kpiName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="檢測開關"
                                    align="center">
                                    <template slot-scope="scope">
                                        <el-switch
                                            v-model="scope.row.kpiStatus"
                                            :disabled="isDisabled"
                                            active-text="關閉"
                                            inactive-text="開啟">
                                        </el-switch>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="報警閾值"
                                    align="center">
                                    <template slot-scope="scope">
                                            <el-row>
                                                <el-col :span="10" style="height:23px;">
                                                    <el-form-item
                                                        v-if="scope.row.kpiType === 'range'"
                                                        :prop="'params.' + scope.$index + '.min'"
                                                        :rules="paramsForm.paramsRules.min">
                                                        <el-input v-model.number="scope.row.min" size="small" :disabled="isDisabled"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="1">-</el-col>
                                                <el-col :span="10">
                                                    <el-form-item
                                                        v-if="scope.row.kpiType === 'range'"
                                                        :prop="'params.' + scope.$index + '.max'"
                                                        :rules="paramsForm.paramsRules.max">
                                                        <el-input v-model.number="scope.row.max" size="small" :disabled="isDisabled"></el-input>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form>

關鍵一

此處 data中定義的變量，params：表格數據，后台查詢獲得；paramsRules：校驗規則

關鍵二

此處 :model、:rules不啰嗦解釋

關鍵三

此處 :prop="'params.' + scope.$index + '.min'"和:rules="paramsForm.paramsRules.min"即動態對應上每行數據的校驗規則，其他不解釋

如此而已，遇事不要慌，歡迎留言交流