elementUI form表单的嵌套校验

在Element UI中，可以使用el-form组件来创建表单，并通过rules属性定义验证规则。当你需要在一个表单内嵌套另一个表单时（例如在一个对话框中），你可以通过使用ref属性来引用内嵌表单，并通过validate方法来触发验证。

以下是一个简单的例子，展示了如何在Element UI中进行嵌套表单的验证：

<template>
  <el-form :model="outerForm" :rules="outerRules" ref="outerForm">
    <el-form-item label="外部表单项" prop="outerField">
      <el-input v-model="outerForm.outerField"></el-input>
    </el-form-item>
    <el-form :model="innerForm" :rules="innerRules" ref="innerForm">
      <el-form-item label="内部表单项" prop="innerField">
        <el-input v-model="innerForm.innerField"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="validateOuterForm">验证外部表单</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        outerForm: {
          outerField: ''
        },
        innerForm: {
          innerField: ''
        },
        outerRules: {
          outerField: [
            { required: true, message: '请输入外部表单项', trigger: 'blur' }
          ]
        },
        innerRules: {
          innerField: [
            { required: true, message: '请输入内部表单项', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      validateOuterForm() {
        this.$refs.outerForm.validate((valid) => {
          if (valid) {
            this.$refs.innerForm.validate((innerValid) => {
              if (innerValid) {
                console.log('外部和内部表单验证通过');
              } else {
                console.log('内部表单验证未通过');
              }
            });
          } else {
            console.log('外部表单验证未通过');
          }
        });
      }
    }
  };
</script>

在这个例子中，我们有一个外部表单和一个嵌套在其中的内部表单。我们通过点击按钮来触发外部表单的验证，如果外部表单验证通过，则继续验证内部表单。每个表单都有自己的验证规则，定义在outerRules和innerRules中。使用ref属性和$refs对象，我们可以在Vue实例的方法中访问表单并调用validate方法来触发验证。