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

小贵子的博客

已于 2023-07-26 17:30:04 修改

阅读量1.7k

点赞数

文章标签： ui vue.js elementui

于 2023-07-26 17:27:00 首次发布

本文链接：https://blog.csdn.net/zyg1515330502/article/details/131943943

版权

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博客