侧边栏壁纸
博主头像
波哥

大龄程序猿&自由职业者&副业达人
爱好:敲代码、搞副业
12+年开发经验,热衷自动化网络推广!

  • 累计撰写 1,810 篇文章
  • 累计创建 77 个标签
  • 累计收到 13 条评论

目 录CONTENT

文章目录

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

波哥
2022-10-11 / 0 评论 / 0 点赞 / 50 阅读 / 275 字

vue表格校验报错: Error in mounted hook:

" "

错误描述

表格循环校验时报错:

[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!

image

引起原因

报错原因是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' "

image

代码:

<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>
0

评论区