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

问题描述

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

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"

复制代码
相关推荐
在下Z.1 分钟前
前端基础--css(1)
前端·css
常在士心5 分钟前
Flutter项目支持鸿蒙环境
前端
重生之我要当java大帝5 分钟前
java微服务-尚医通-管理平台前端搭建-医院设置管理-4
java·开发语言·前端
用户59561957545236 分钟前
Vue-i18n踩坑记录
前端
WindrunnerMax8 分钟前
从零实现富文本编辑器#8-浏览器输入模式的非受控DOM行为
前端·前端框架·github
我是日安8 分钟前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js
sjin11 分钟前
React源码 - 关键数据结构
前端·react.js
旺仔牛仔QQ糖12 分钟前
IntersectionObserver 异步交叉观察器
前端
猪猪拆迁队14 分钟前
基于ECS架构的Canvas画布编辑器
前端
Q_Q196328847516 分钟前
python+vue的在线租房 房屋租赁系统
开发语言·vue.js·spring boot·python·django·flask·node.js