需求场景：表单中有用户基本信息，同时用户可以具有0个或多个项目经验，由此分析项目经验应该是数组的，那么我们应该如何制作这个循环表单呢？
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <div class="item-title">工作案例-其他工作案例</div> <div class="item-content"> <div class="expr-item" v-for="(item, index) in form.works" :key="item.key"> <i class="el-icon-delete icon-del" @click="delWorkCase('其他', item)"></i> <el-form-item label="项目名称" :prop="'works.' + index + '.projectName'" :rules="moreObjectRules.projectName"> <el-input v-model="item.projectName"></el-input> </el-form-item> ...... <div class="flex-row"> <el-form-item label="图片" :prop="'works.' + index + '.proImg'" :rules="moreObjectRules.proImg"> <span>{{item.proImg}}</span> <upload-preview :imgs="item.proImg" @delete="delWorkImgs" :delIcon="true" v-if="item.proImg.length"></upload-preview> <span v-else>暂无数据</span> </el-form-item> </div> </div> </div> </el-form>如何验证循环表单的规则：
moreObjectRules: { projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }], },注意：rules 是每个表单都要添加规则，同时表单验证单项依靠 prop，因此 动态生成 prop，例如：prop＝"'moreObjectRules.' + index +'.projectName'"，moreObjectRules是v-for绑定的数组，index是索引，projectName是表单绑定的v-model的名称，然后用.把他们链接起来。
同时我们循环表单里面需要使用 element-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是在循环表单会存在多次复用上传组件的需求, ，这时候就出现了问题【Error in mounted hook: "Error: please transfer a valid prop path to form item!"】,页面上有多个上传组件时,要怎么操作呢?
我采用的方法就是将 upload 组件的相关信息都放入到子组件中，通过父子组件间的传值，这样就能达到在循环表单中，多次复用组件。
详情请仔细阅读 element-ui form 动态增减表单项, 参考案例。
