elementUI之el-form-item的嵌套的场景

在Element UI中，el-form-item组件可以用来创建表单项，并且可以通过嵌套的方式来构建复杂的表单。以下是一个使用el-form-item嵌套的例子，其中包含了一个嵌套的el-form。

<template>
  <el-form ref="form" :model="form" label-width="120px">
    <el-form-item label="用户信息">
      <el-form :model="form.userInfo" ref="userInfoForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.userInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model.number="form.userInfo.age"></el-input>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
      <el-button @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        userInfo: {
          name: '',
          age: ''
        },
        email: ''
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

在这个例子中，我们创建了一个外部el-form，其中包含了一个嵌套的el-form（用于用户信息）和一个邮箱字段。通过这种方式，我们可以创建多层嵌套的表单结构，每一层表单都可以有它自己的验证规则。