vue表格校验报错： Error in mounted hook: "Error: please transfer a valid prop path to form item!"

" "

错误描述

表格循环校验时报错：

[Vue warn]: Error in mounted hook: "Error: please transfer a valid prop path to form item!"

vue.runtime.esm.js?2b0e:1888 Error: please transfer a valid prop path to form item!

​

引起原因

报错原因是prop定义没有使用table绑定的数组名tableData

解决办法

正确的写法：

关键点：

• el-table绑定的数据:data必须是el-from绑定的数据子对象。若el-form绑定的是checkForm，el-table绑定的必须是checkForm.xxxxList
• el-form-item中prop绑定的数据必须是eltable绑定数据的对象名称，:prop只能是：'xxxxList.' + scope.$index + '.proName' "

代码：

<el-form ref="checkForm" :model="checkForm" :rules="basicRules" label-width="80px">

    <el-table :data="checkForm.mkCheckedStockDetailList" :row-class-name="rowMkCheckStockDetailIndex" stripe border>

        <el-table-column label="包装数量" prop="checkStockUnitCount" width="180">
                 <template slot-scope="scope">
                    <el-form-item
                      :prop="'mkCheckedStockDetailList.' + scope.$index + '.checkStockUnitCount'"
                      :rules="basicRules.checkStockUnitCount"
                    >
                      <el-input placeholder=""
                                v-model.trim="scope.row.checkStockUnitCount"
                                @blur="calCount(scope.row)"
                                style="width:110px">
                        <template slot="append">{{ scope.row.selectedUnit }}</template>
                      </el-input>
                    </el-form-item>
                  </template>
            </el-table-column>

    </el-table>
</el-form>