elementUI form表单多级嵌套验证

废话不多说，直接上代码及效果图

效果展示

代码

<template>
  <div class="home">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
      <el-form-item label="外层名字" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="外层活动" prop="desc">
        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
      </el-form-item>
      <div v-for="(n,i) in ruleForm.oneList" :key="i">
        <div style="display: flex;padding-left: 50px;">
          <el-form-item label="一级嵌套名字" prop="name" :rules="getRule(n.name,rules.oneRules.name)">
            <el-input v-model="n.name"></el-input>
          </el-form-item>
          <el-form-item label="一级嵌套活动" prop="desc" :rules="getRule(n.desc,rules.oneRules.desc)">
            <el-input v-model="n.desc"></el-input>
          </el-form-item>
        </div>
        <div v-for="(ns,is) in n.twoList" :key="is" style="padding-left: 150px;">
          <div>
            <el-form-item label="二级嵌套名字" prop="name" :rules="getRule(ns.name,rules.oneRules.twoRules.name)">
              <el-input v-model="ns.name"></el-input>
            </el-form-item>
            <el-form-item label="二级嵌套活动" prop="desc" :rules="getRule(ns.desc,rules.oneRules.twoRules.desc)">
              <el-input v-model="ns.desc"></el-input>
            </el-form-item>
          </div>
          <div v-for="(nss,iss) in ns.threeList" :key="iss" style="display: flex;padding-left: 150px;">
            <el-form-item label="三级嵌套名字" prop="name" :rules="getRule(nss.name,rules.oneRules.twoRules.threeRules.name)">
              <el-input v-model="nss.name"></el-input>
            </el-form-item>
            <el-form-item label="三级嵌套活动" prop="desc" :rules="getRule(nss.desc,rules.oneRules.twoRules.threeRules.desc)">
              <el-input v-model="nss.desc"></el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  components: {

  },
  data() {
    return {
      ruleForm: {
        name: '',
        desc: '',
        oneList:[
          {
            twoList:[
              {
                threeList:[
                  {}
                ]
              },
              {},
            ]
          },
          {
            twoList:[
              {},
            ]
          },
          {
            twoList:[
              
            ]
          }
        ]
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ],
        oneRules:{
          name:'请填写一级名字',
          desc:'请填写一级活动',
          twoRules:{
            name:'请填写二级名字',
            desc:'请填写二级活动',
            threeRules:{
              name:'请填写三级名字',
              desc:'请填写三级活动',
            }
          }
        }
      }
    }
  },
  methods: {
    getRule(value,msg) {
      return {
        required: true, validator: (rule, v, callback) => {
          if (value == null || value == '') {
            callback(new Error(msg));
          }
          callback();
        }, trigger: ['change', 'blur']
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>