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 form-item-attributes;

也就是说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对你有所帮助！