element ui form表单循环嵌套及嵌套表单item的校验方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui form表单循环嵌套及嵌套表单item的校验方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

elementui 嵌套表单验证,ui,vue.js,elementui

html:

<div class="strategy-name-box">
              <div
                class="strategy-item"
                v-for="(item, index) in form.strategyList"
                :key="index"
              >
                <div class="strategy-title">{{ item.nodeName }}</div>
                <el-form-item
                  class="strategy-content"
                  v-for="(item1, index1) in item.inputPreConfig"
                  :label="'域名' + index"
                  :key="index1"
                  :prop="`strategyList[${index}].inputPreConfig[${index1}].value`"
                  :rules="{
                    required: true,
                    message: '域名不能为空',
                    trigger: 'blur',
                  }"
                >
                  <el-input v-model="item1.value" />
                </el-form-item>
              </div>
 </div>

js:

form: {
       
        taskTimeout: "",
        cycleInterval: "",
        cycleTime: "",
        strategyList: [
          {
            nodeName: "",
            inputPreConfig: [
              {
                name: "",
                value: "",
              },
            ],
          },
          {
            nodeName: "",
            inputPreConfig: [
              {
                name: "",
                value: "",
              },
            ],
          },
        ],
      },

submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert(1111)
        } else {
          return false;
        }
      });
    },

详细的大家可以参考：element ui form循环嵌套表单及嵌套表单的验证方法（校验）_element循环表单_RxnNing的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-703045.html

到了这里，关于element ui form表单循环嵌套及嵌套表单item的校验方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！