问题描述
提示：这里描述项目中遇到的问题：
ElementUI el-form表单多层数组的校验
页面效果：
数据结构：
javascript
addform: {
code: '',
type: '',
value: '',
state: 1,
remark: '',
fieldList: [
{
fieldCode: '',
resolverEntities: [{
resolverType: '',
resolverConfigOne: '',
resolverConfigTwo: ''
}]
}
]
}HTML：
html
<el-form ref="addform" :rules="formRules" :model="addform" size="small">
<el-form-item label="标识:" prop="code">
<el-input
v-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-option
v-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-switch
v-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>
<li
v-for="(customRuleItem, customRuleIndex) in addform.fieldList"
:key="customRuleIndex"
>
<el-form-item
class="field-name"
label="字段名:"
:prop="`fieldList.${customRuleIndex}.fieldCode`"
:rules="formRules.fieldCode"
>
<el-input
v-model="addform.fieldList[customRuleIndex].fieldCode"
placeholder="请输入"
autocomplete="off"
clearable
/>
</el-form-item>
<div
class="decode-rule-list"
v-for="(
decodeRuleItem, decodeRuleIndex
) in customRuleItem.resolverEntities"
:key="decodeRuleIndex"
>
<el-row :gutter="24">
<el-col :span="5">
<el-form-item
label=""
:prop="`fieldList.${customRuleIndex}.resolverEntities.${decodeRuleIndex}.resolverType`"
:rules="formRules.resolverType"
>
<el-select
v-model="decodeRuleItem.resolverType"
placeholder="请选择"
>
<el-option
v-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-input
v-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-input
v-model="decodeRuleItem.resolverConfigTwo"
placeholder="请输入"
autocomplete="off"
clearable
/>
</el-form-item>
</el-col>
</template>
<el-col :span="3" class="decode-rule-operate">
<img
v-if="customRuleItem.resolverEntities.length > 1"
src="@/assets/images/common/delete.png"
alt=""
class="deleteImg"
@click="
handleDeleteResolver(customRuleIndex, decodeRuleIndex)
"
/>
<img
src="@/assets/images/common/add.png"
alt=""
class="addImg"
@click="
handleAddResolver(customRuleIndex, decodeRuleIndex)
"
/>
</el-col>
</el-row>
</div>
</li>
</ul>
<div class="add-btn">
<img
src="@/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"