el-form中嵌套el-form提交数据时怎么操作

在el-form中嵌套el-form提交数据时，你可以使用以下方法操作：

1. 首先，为了在el-form中嵌套el-form，你需要在外层form表单中使用ref属性来标识它。

2. 在内层的el-form中，你可以使用prop属性来绑定对应的数据字段。

3. 在提交数据时，你可以在外层form表单的提交方法中，通过调用内层form表单的validate方法来校验内层form表单的数据。

4. 在校验通过后，你可以继续执行你的其他操作，比如调用接口等一系列正常操作。

下面是一个示例代码，展示了如何在el-form中嵌套el-form提交数据的操作：

<template>
  <el-form ref="outerForm" :model="formData" :rules="formRules" @submit="submitForm">
    <!-- 外层form表单的内容 -->
    <el-form-item label="外层字段">
      <el-input v-model="formData.outerField"></el-input>
    </el-form-item>

    <!-- 内层form表单 -->
    <el-form ref="innerForm" :model="formData.innerData" :rules="innerFormRules">
      <!-- 内层form表单的内容 -->
      <el-form-item label="内层字段">
        <el-input v-model="formData.innerData.innerField"></el-input>
      </el-form-item>

      <!-- 其他内层表单字段... -->

    </el-form>

    <!-- 提交按钮 -->
    <el-button type="primary" native-type="submit">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        outerField: '',
        innerData: {
          innerField: ''
        }
      },
      formRules: {
        outerField: [
          { required: true, message: '请输入外层字段', trigger: 'blur' }
        ]
      },
      innerFormRules: {
        innerField: [
          { required: true, message: '请输入内层字段', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm() {
      // 校验内层form表单的数据
      this.$refs.innerForm.validate().then(() => {
        // 内层form表单校验通过后执行的操作
        // 可以在这里调用接口等一系列正常操作

        // 内层form表单数据校验通过后，再提交外层form表单的数据
        this.$refs.outerForm.validate().then(() => {
          // 外层form表单校验通过后执行的操作
          // 可以在这里继续执行你的其他操作，比如调用接口等一系列正常操作
        });
      });
    }
  }
};
</script>