el-form-item 设置 prop 报错：please transfer a valid prop path to form item的解决办法

模板如下

<el-form :model="orderData">    <el-form-item prop="passengerInfo[0].ticketNos[0].ticketNo"></el-form-item></el-form>

数据结构如下

orderData: {  passengerInfo: [{    ticketNos: [{      ticketNo: 'fddfg'    }]  }]}

报错如下：

please transfer a valid prop path to form item

错误原因

上面是因为 form-item.vue，里面的这个function getPropByPath (obj, path) 函数抛出的异常。
原因是el-form-item上面的填写的prop="key" 不在 el-form的 :model="obj" 里面，也就是可以不在obj里面。

解决办法

网站解决办法说明

the problem is the attribute [prop] of el-form-item must be a string, and make sure the [prop] is a attribute of the model which you write on el-form; see ;

也就是说el-form-item上的属性prop字段，必须是其父级组件el-form中绑定model字段中的一个直接子属性。在这个示例中必须保证不管何时 orderData.passengerInfo[0].ticketNos[0].ticketNo可以访问到，访问链路中不能出错。

修改为如下：

<el-form :model="orderData">    <el-form-item prop="'passengerInfo.'+firstIndex+'.ticketNos.'+firstIndex+'.ticketNo'""></el-form-item></el-form>

表格嵌套表单的校验，一个简单的示例如下

<template>  <div>    <el-form :model="forms" ref="forms" :rules="rules">      <el-table :data="forms.voList">        <el-table-column        label="商品名称">          <template slot-scope="scope">            <el-form-item :prop="'voList.'+scope.$index+'.goodsName'">              <el-input v-model="scope.row.goodsName"></el-input>            </el-form-item>          </template>        </el-table-column>        <el-table-column          label="商品编码">          <template slot-scope="scope">            <el-form-item :prop="'voList.'+scope.$index+'.goodsCode'">              <el-input v-model="scope.row.goodsCode"></el-input>            </el-form-item>          </template>        </el-table-column>        <el-table-column          label="价格">          <template slot-scope="scope">            <el-form-item :prop="'voList.'+scope.$index+'.unitPrice'" :rules="rules.unitPrice">              <el-input v-model="scope.row.unitPrice"></el-input>            </el-form-item>          </template>        </el-table-column>        <el-table-column          label="数量">          <template slot-scope="scope">            <el-form-item :prop="'voList.'+scope.$index+'.num'" :rules="rules.unitPrice">              <el-input v-model="scope.row.num"></el-input>            </el-form-item>          </template>        </el-table-column>      </el-table>    </el-form>    <el-button type="primary" @click="save">批量开票</el-button>  </div></template><script>export default {  name: "table",  data(){    return {      forms:{        id:1,        documentNo:null,        buyerName:"服务技术",        buyerDp:"42118XXXXXXXXXX72X",        buyerBankAccount:"招商引航4890284",        buyerAddressPhone:"深圳市宝安区110112",        buyerEmail:null,        buyerPhone:null,        buyerType:"01",        remarks:"这是备注",        total:350.9,        voList:[          {            goodsName:"黄金",            goodsCode:"44021940",            specification:null,            unit:"克",            num:1,            unitPrice:291.37,            taxRate:0.17,            taxAmount:49.53,            favouredPolicy:"0",            zeroTaxRate:"",            hsbz:"1"          },          {            goodsName:"花生",            goodsCode:"4574511",            specification:null,            unit:"斤",            num:1,            unitPrice:8.55,            taxRate:0.17,            taxAmount:1.45,            favouredPolicy:"0",            zeroTaxRate:"",            hsbz:"1"          }        ]      },      rules:{        num:[{required:true,message:'数量不能为空',trigger:'blur'}],        unitPrice:[{required:true,message:'单价不能为空',trigger:'blur'}]      }    }  },  methods:{    save(){      this.$refs['forms'].validate((valid)=>{        if(valid){          console.log(1)        }      })    }  }}</script>

你可以在你的vue项目中尝试一下。

希望这个demo对你有所帮助！