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"

复制代码
相关推荐
懒大王952721 分钟前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
yinuo27 分钟前
Uni-App跨端实战:微信小程序WebView与H5通信全流程解析(01)
前端
xkroy1 小时前
ajax
前端·javascript·ajax
Yvonne爱编码1 小时前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
闲人编程1 小时前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang1 小时前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端
Swift社区1 小时前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript
清风细雨_林木木2 小时前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js
大熊猫侯佩2 小时前
iOS 26 仅需几行代码让 SwiftUI 7 液态玻璃界面焕发新春
前端·swiftui·apple