帮我使用vue+elementui实现一个需求：1，页面左右布局，左侧为el-tree树形结构菜单，右侧为对应的子组件 2、每个子组件都可以有表单构成 3、每个子组件都有一个提交按钮，点击这个提交按

<template>
  <div class="app">
    <div class="left-panel">
      <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="right-panel">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script>
export default {
   
  name: "App",
  data() {
   
    return {
   
      treeData: [
        {
   
          label: "Component A",
          component: "component-a",
        },
        {
   
          label: "Component B",
          component: "component-b",
        },
      ],
      currentComponent: "",
    };
  },
  methods: {
   
    handleNodeClick(data) {
   
      this.currentComponent = data.component;
    },
  },
  components: {
   
    "component-a": {
   
      template: "<div>Component A Form</div>",
    },
    "component-b": {
   
      template: "<div>Component B Form</div>",
    },
  },
};
</script>

<style>
.app {
   
  display: flex;
  height: 100vh;
}

.left-panel {
   
  width: 200px;
  background-color: #f0f0f0;
  padding: 10px;
}

.right-panel {
   
  flex: 1;
  padding: 10px;
}
</style>

在这段代码中，我们创建了一个左右布局的界面，左侧使用了ElementUI的树形菜单组件(el-tree)，右侧根据用户的选择展示不同的组件。这里我们用到了Vue中的动态组件和组件注册方式。

接下来，我们需要为每个子组件添加表单，并在点击提交按钮时获取数据并提交给后端。我们可以在每个子组件中添加一个表单和一个提交按钮，并在点击提交按钮时触发一个提交事件，如下所示：

<template>
  <div>
    <el-form :model="formData" ref="form">
      <el-form-item label="Field 1">
        <el-input v-model="formData.field1"></el-input>
      </el-form-item>
      <el-form-item label="Field 2">
        <el-input v-model="formData.field2"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </div>
</template>

<script>
export default {
   
  name: "ComponentA",
  data() {
   
    return {
   
      formData: {
   
        field1: "",
        field2: "",
      },
    };
  },
  methods: {
   
    handleSubmit() {
   
      this.$refs.form.validate((valid) => {
   
        if (valid) {
   
          this.$emit("submit", this.formData);
        }
      });
    },
  },
};
</script>

每个子组件中添加了一个formData对象来存储用户输入的数据。在点击提交按钮时，我们触发了一个handleSubmit方法，这个方法首先调用了el-form的validate方法来验证表单数据的有效性，如果表单数据验证通过，则通过this.$emit(“submit”, this.formData)事件触发一个submit事件，并将用户输入的formData作为参数传递给父组件。

接下来，我们需要在父组件中监听子组件的submit事件，并将所有子组件的数据一并提交给后端。我们可以在App.vue中添加一个data属性formData来存储所有子组件的数据，并在子组件的submit事件中将数据添加到formData中。在点击最终提交按钮时，我们可以将formData中的所有数据一并提交给后端，如下所示：

<template>
  <div class="app">
    <el-container>
      <el-aside width="200px">
        <el-tree :data="menu" :props="{ label: 'text' }" @node-click="handleNodeClick"></el-tree>
      </el-aside>
      <el-main>
        <component :is="currentComponent" @submit="handleComponentSubmit"></component>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import component1 from "@/components/component1.vue";
import component2 from "@/components/component2.vue";

export default {
   
  data() {
   
    return {
   
      menu