element-ui的el-table和el-form表单校验嵌套使用

在项目有遇到table中嵌套form，并且带有表单验证的需求，效果图如下：

 

 

 

刚开始el-form-item定义了静态prop（prop=“sn”），结果input填入值后错误提示一直存在，自定义校验的value也为undefined，然后经百度大神提点，得知出错在prop

• ⚠️应该写动态prop保证唯一性。

:prop="'monitorData.' + scope.$index + '.sn'" 

 

• ⚠️不只是el-form才配置，每一个el-form-item都要配置rules属性

• <el-form :model="monitorForm" :rules="monitorForm.monitorRules" ref="monitorForm"> <el-table class="blue-theme add-virtual-table" empty-text="请 新增填写行 进行填写" :data="monitorForm.monitorData" style="width: 100%;"> <el-table-column type="index" align="center" width="50"/> <el-table-column prop="sn" label="SN"> <template slot-scope="scope"> <el-form-item :prop="'monitorData.' + scope.$index + '.sn'" :rules="monitorForm.monitorRules.sn"> <el-input class="light-blue-theme" clearable v-model="scope.row.sn" placeholder="请输入sn"/> </el-form-item> </template> </el-table-column> <el-table-column label="品牌"> <template slot-scope="scope"> <el-form-item :prop="'monitorData.' + scope.$index + '.type'" :rules="monitorForm.monitorRules.type"> <el-input class="light-blue-theme" v-model="scope.row.type" placeholder="请输入品牌名称"/> </el-form-item> </template> </el-table-column> <el-table-column label="高度" min-width="160"> <template slot-scope="scope"> <el-form-item :prop="'monitorData.' + scope.$index + '.height'" :rules="monitorForm.monitorRules.height"> <el-input class="light-blue-theme" v-model="scope.row.height" placeholder="请输入高度"/> </el-form-item> </template> </el-table-column> <el-table-column prop="date" label="操作" width="100"> <template slot-scope="scope"> <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="handleDeleteRow(scope.$index, scope.row)"></el-button> </template> </el-table-column> </el-table> </el-form> 

   data

• monitorForm: { monitorData: [], monitorRules: { sn: [ { required: true, message: 'SN不能为空', trigger: 'blur' } ], type: [ { required: true, message: '品牌名称不能为空', trigger: 'blur' } ], height: [ { required: true, message: '高度不能为空', trigger: 'blur' } ] } }, // 存储表格table信息