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信息