提示：记录一次element ui的表单使用总结

---

前言

提示：正确设置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.关键代码

代码如下（示例）：

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

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

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

---

总结

提示：正确设置prop属性可以避免报错：Error: please transfer a valid prop path to form item!
级联组件的rules设置可以通过type:'array’设置；