Vue之动态表单的实现及校验

在实际开发中，我们会遇到动态表单以及需要对表单做校验，这边说下我这边的一个需求，原型是这样的

当我点击新增答疑问题四，就会在第一下面添加一个答疑二，跟答疑一一样，我们这么的数据类型就是一个大的对象，然后答疑详情又是数组，数组里面包含各个对象表示的是一个个答疑点，比如答疑一这样，现在我们来看看数据类型

 formData:{
          id:'',
            taskId:'',
            supplierName:'',
            supplierId:'',
            Type:'',
           Time:new Date(),
            projectId:'',
            DetailList:[
                {name:'答疑1',ref:'ref1',question:'',content:'',AttachList:[]}
            ]
        },

处理这种多层数据里面的校验，我是这样处理的

<el-form ref="form" :rules="rules" :model="formData" label-width="auto" class="addSupplierListForm">
            <el-form-item label="供应商名称" prop="supplierName">
               <el-input v-model="formData.supplierName" disabled></el-input>
            </el-form-item>
            <el-form-item label="澄清答疑时间" prop="Time">
                <el-date-picker type="date" placeholder="请选择日期" v-model="formData.Time" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-form-item label="答疑方式" prop="answerType">
                <el-select v-model="formData.Type" placeholder="请选择答疑方式">
                    <el-option v-for="(item,index) of clarifyType" :label="item.label" :value="item.value" :key="index"></el-option>
                </el-select>
            </el-form-item>
            <div class="clarifyList"  v-for="(item,index) in formDataDetailList" :key="index+'addClarify'">
                <el-form-item  :label="item.name" class="clarifyItem">
                    <span @click="delClarify(item,index)" class="el-icon-delete" v-if="index!==0"><span class="clarifyDel">删除</span></span>
                </el-form-item>
                <div class="clarifyContent">
                    <el-form-item  label="答疑问题" :prop="`DetailList[${index}].Question`" :rules="{ required: true, message: '请输入答疑问题', trigger: 'blur' }">
                        <el-input v-model="itemQuestion" placeholder="请输入答疑问题" :maxlength="200"></el-input>
                    </el-form-item>
                    <el-form-item  label="答疑正文" :prop="`DetailList[${index}].Content`" :rules="{ required: true, message: '请输入答疑正文', trigger: 'blur' }">
                        <el-input v-model="itemContent" class="textarea" type="textarea" placeholder="请输入答疑正文"  :maxlength="2000"></el-input>
                    </el-form-item>
                    <div @click="currentChange(item,index)">
                        <el-form-item label="附件上传" class="clarifyUpload">
                            <el-upload
                                :ref="item.ref"
                                action="action"
                                v-model="item.AttachList"
                                :auto-upload="true"
                                :http-request="otherRequest"
                                :before-upload="beforeOtherRequest"
                                :show-file-list="true"
                                :on-remove="otherRemove"
                                :on-exceed="aliExceed"
                                :limit="3"
                                :file-list='item.AttachList'
                                class="uploadBox">
                                <el-button type="text" class="aliBtnOne"><img src="/image/afterLogin/layout/uploadFile.png" alt="" class="xialaOne">上传文件</el-button>
                                <div class="el-upload__tip aliTipOne" style="display:inline-block;margin-left:20px;margin-top:0"  slot="tip"></div>
                            </el-upload>
                        </el-form-item>
                    </div>
                </div>
            </div>
            <div class="addClarify" @click="addClarify">
                <em class="el-icon-plus"></em>
                <span class="addClarifyBtn">新增答疑问题</span>
            </div>
            <el-form-item class="clarifyConfirm">
                <el-button style="width:228px" type="primary baseBtn" @click="submit">确定</el-button>
                <el-button style="width:228px" type="info" @click="cancle">取消</el-button>
            </el-form-item>
        </el-form>

虽然整个页面分为上下静态表单和动态表单两部分，但用的是一个按钮一次提交的，为了实现统一校验，所以整个页面最好使用一个el-form标签包裹起来，静态表单的校验请参考vue静态表单校验，而动态表单的校验有两个地方需要注意，一个是el-form-item标签上prop属性的写法，另一个就是校验规则的写法（只能写在标签上），具体写法如下：