前言

1	提示：正确设置v-for中的prop属性可以解决如下报错：

Error: please transfer a valid prop path to form item!

提示：以下是本人在实际项目中遇到的相关问题，下面案例可供参考

一、element ui 在使用v-for循环时prop和rules如何设置？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、使用步骤

1.具体代码
代码如下（示例）：

<el-form ref="personInfoForm" v-loading="infoLoading" :model="personInfo" :rules="formRules">    
       <div v-if="personInfo.hasPassBy==1">
         <div class="passBY">
           <span style="font-style:bold">途经城市</span>
           <el-link type="primary" @click="addPassby" style="margin-left:10px">添加</el-link>
         </div>
         <div v-for="(domain, index) in personInfo.passByCities" :key="index" class="pass-box" border-radius='30px'>
           <div class="pass-by-title">
             <span>途经城市{{index+1}}</span>
             <div ><el-link type="primary" @click="deletePassby(index)">删除</el-link></div>
           </div>
           <el-row :gutter="30">
             <el-col :span=12>
               <el-form-item label="途径日期" :prop="`passByCities.${index}.passByTime`"
                   :rules="[{ required: true, message: '请选择途径日期', trigger: 'blur' }]">
                 <el-date-picker 
                   v-model="domain.passByTime"
                   style="width: 100%"
                   type="date"
                   value-format="yyyy-MM-dd"
                   placeholder="请选择途径日期"
                 />
               </el-form-item>
             </el-col>
             <el-col :span=12>
               <el-form-item label="请选择途经城市" :prop="`passByCities.${index}.passAddr`" 
                 :rules="[{type:'array',required: true, message: '请选择途经城市', trigger: 'change' }]">
                 <el-cascader style="width: 100%"
                   v-model="domain.passAddr"
                   :placeholder="`${domain.passByProvince}${domain.passByCity}${domain.passByDistrict}` || '请选择途径城市'"
                   :options="options.fromCityOpt"
                   :props="{
                     multiple: false,
                     emitPath: true,
                     value: 'code',
                     label: 'name',
                   }"
                   :show-all-levels="true"
                   filterable
                   clearable
                   @change="((value)=>{handlePassby(value, index)})"/>
               </el-form-item>
             </el-col>
           </el-row>  
         </div>
       </div>

2.关键代码

代码如下（示例）：

1
2
3

<el-form-item label="途径日期" 
	:prop="`passByCities.${index}.passByTime`"
    :rules="[{ required: true, message: '请选择途径日期', trigger: 'blur' }]">

prop设置：必须为list数组名passByCities和index索引以及字段名passByTime的拼接才可以；
rules设置：普通字符串的可以如上直接写，假如是像我一样的下面的要有级联选择的，级联选择的rules必须设置数组类型，如：

1
2
3

<el-form-item label="请选择途经城市" 
	:prop="`passByCities.${index}.passAddr`" 
    :rules="[{type:'array',required: true, message: '请选择途经城市', trigger: 'change' }]">