vue table 校验报错：Error in mounted hook: “Error: please transfer a valid prop path to form ite

原创

已于 2023-05-11 10:52:25 修改 · 3.8k 阅读

标签

#vue.js #elementui

收录于

于 2023-05-11 10:26:08 首次发布

本文介绍了在使用Vue.js和ElementUI时遇到的表格验证问题及解决方案。错误发生在mounted钩子中，提示需传递有效的prop路径给form item。问题的关键在于el-table的数据绑定必须是el-form数据的子对象，且el-form-item的prop应指向表格某一行的具体字段，例如'xxxxList.' + scope.$index + '.proName'。作者发现错误源于在prop中误添加了formInline，移除后问题得到解决。

原因：

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

我这次是因为把具体的字段展示前面添加了formInline;删除就好了

解决代码：

<el-table-column prop="yearElectricity" label="">
            <template slot="header">
              <p>年电量</p>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'detailData.' + scope.$index +