表格是el-table自动获取的后台数据,每行都有el-input的验证,这样一个rules的规则就不能匹配到每一行,所以要是用动态的prop和rules规则
关键一
此处 data中定义的变量,params:表格数据,后台查询获得;paramsRules:校验规则
关键二
此处 :model、:rules
关键三
此处 :prop="'params.' + scope.$index + '.min'"和:rules="paramsForm.paramsRules.min"即动态对应上每行数据的校验规则
<template> <div> <el-form :model="paramsForm" ref="rForm" :rules="paramsForm.paramsRules"> <el-table :data="paramsForm.params" style=" 100%" border stripe max-height="990" highlight-current-row > <el-table-column fixed width="55" align="center" label="序号" show-overflow-tooltip type="index" :index="indexMethod" > </el-table-column> <el-table-column align="center" type="selection" width="55"> </el-table-column> <el-table-column label="检测类型" align="center" width="160" prop="kpiName" sortable show-overflow-tooltip > <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-item size="large" align="center" style="padding-top: 30px"> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { isDisabled: false, paramsForm: { params: [ { kpiName: "视频丢失", id: "", kpiStatus: false, kpiType: "other", min: "", max: "", }, { kpiName: "画面抖动", id: "", kpiStatus: false, kpiType: "other", min: "", max: "", }, { kpiName: "画面冻结", id: "", kpiStatus: false, kpiType: "other", min: "", max: "", }, { kpiName: "镜头遮挡", id: "", kpiStatus: false, kpiType: "other", min: "", max: "", }, { kpiName: "图像过亮", id: "", kpiStatus: false, kpiType: "range", min: 60, max: 120, }, { kpiName: "图像过暗", id: "", kpiStatus: false, kpiType: "range", min: 10, max: 60, }, ], paramsRules: { min: [ { type: "number", required: false, min: 1, max: 120, message: "数值范围(1-120)", trigger: "blur", }, ], max: [ { type: "number", required: false, min: 1, max: 120, message: "数值范围(1-120)", trigger: "blur", }, ], }, }, }; }, methods: { indexMethod(index) { return index + 1; }, submitForm() { this.$refs["rForm"].validate((valid) => { if (!valid) return; // TODO 提交表单 console.log("success"); }); }, resetForm() { this.$refs["rForm"].resetFields(); }, }, }; </script> <style lang="scss" scoped> </style>