ElementUI el-form表单多层数组的校验

问题描述

提示：这里描述项目中遇到的问题：

ElementUI el-form表单多层数组的校验

---

页面效果：

---

数据结构：

addform: {code: '',type: '',value: '',state: 1,remark: '',fieldList: [{fieldCode: '',resolverEntities: [{resolverType: '', resolverConfigOne: '', resolverConfigTwo: '' 
}]}]}

HTML：

<el-form ref="addform" :rules="formRules" :model="addform" size="small"><el-form-item label="标识:" prop="code"><el-inputv-model="addform.code"placeholder="请输入"autocomplete="off"clearable/></el-form-item><el-row><el-col :span="8"><el-form-item label="类型:" prop="type"><el-select v-model="addform.type" placeholder="请选择"><el-optionv-for="item in typeOptions":key="item.code":label="item.name":value="item.code"></el-option></el-select></el-form-item></el-col><el-col :span="16"><el-form-item class="state-box" label="状态:" prop="state"><el-switchv-model="addform.state"active-color="#13ce66"inactive-color="#ff4949":active-value="1":inactive-value="2"></el-switch></el-form-item></el-col></el-row><div class="custom-rule-box"><p>自定义解码字段</p><ul><liv-for="(customRuleItem, customRuleIndex) in addform.fieldList":key="customRuleIndex"><el-form-itemclass="field-name"label="字段名:":prop="`fieldList.${customRuleIndex}.fieldCode`":rules="formRules.fieldCode"><el-inputv-model="addform.fieldList[customRuleIndex].fieldCode"placeholder="请输入"autocomplete="off"clearable/></el-form-item><divclass="decode-rule-list"v-for="(decodeRuleItem, decodeRuleIndex) in customRuleItem.resolverEntities":key="decodeRuleIndex"><el-row :gutter="24"><el-col :span="5"><el-form-itemlabel="":prop="`fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverType`":rules="formRules.resolverType"><el-selectv-model="decodeRuleItem.resolverType"placeholder="请选择"><el-optionv-for="item in decodeRuleOptions":key="item.code":label="item.name":value="item.code"></el-option></el-select></el-form-item></el-col><template v-if="decodeRuleItem.resolverType"><el-col :span="8"><el-form-item:label="computedResolverConfigOneLabel(decodeRuleItem.resolverType)":prop="`fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverConfigOne`":rules="formRules.resolverConfigOne"><el-inputv-model="decodeRuleItem.resolverConfigOne"placeholder="请输入"autocomplete="off"clearable/></el-form-item></el-col><el-col :span="8"><el-form-item:label="computedResolverConfigTwoLabel(decodeRuleItem.resolverType)":prop="`fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverConfigTwo`":rules="formRules.resolverConfigTwo"><el-inputv-model="decodeRuleItem.resolverConfigTwo"placeholder="请输入"autocomplete="off"clearable/></el-form-item></el-col></template><el-col :span="3" class="decode-rule-operate"><imgv-if="customRuleItem.resolverEntities.length > 1"src="@/assets/images/common/delete.png"alt=""class="deleteImg"@click="handleDeleteResolver(customRuleIndex, decodeRuleIndex)"/><imgsrc="@/assets/images/common/add.png"alt=""class="addImg"@click="handleAddResolver(customRuleIndex, decodeRuleIndex)"/></el-col></el-row></div></li></ul><div class="add-btn"><imgsrc="@/assets/images/common/add.png"alt=""class="deleteImg"@click="handleAddField"/>新增</div></div></el-form>

总结：

重点在于 el-form-item 的 prop绑定，参考如下示例

:prop=“fieldList.${customRuleIndex}.fieldCode”

:prop=“fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverConfigOne”