element ui form表单循环嵌套及嵌套表单item的校验方法

小贵子的博客2023-07-27 13:37

html:

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:

javascript 复制代码

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

javascript 复制代码

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

详细的大家可以参考：element ui form循环嵌套表单及嵌套表单的验证方法（校验）_element循环表单_RxnNing的博客-CSDN博客

element ui form表单循环嵌套 及嵌套表单item的校验方法

element ui form表单循环嵌套及嵌套表单item的校验方法