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-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”