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

原创 于 2023-04-11 02:58:07 发布 · 2.2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文展示了如何使用Vue和ElementUI构建一个页面，左侧为el-tree菜单，右侧显示对应子组件，每个子组件有表单。重点在于，所有子组件的数据在某个子组件提交时一并发送给后端。文中详细阐述了动态组件、表单验证、事件传递和数据管理的实现过程。 
<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: [
        {
          id: 1,
          text: "Component 1",
        },
        {
          id: 2,
          text: "Component 2",
        },
      ],
      currentComponent: null,
      formData: {},
    };
  },
  components: {
    component1,
    component2,
  },
  methods: {
    handleNodeClick(node) {
      switch (node.id) {
        case 1:
          this.currentComponent = "component1";
          break;
        case 2:
          this.currentComponent = "component2";
          break;
        default:
          break;
      }
    },
    handleComponentSubmit(data) {
      this.$set(this.formData, this.currentComponent, data);
    },
    handleSubmit() {
      console.log(this.formData);
      // 将 formData 提交给后端
    },
  },
};
</script>

在这个示例中，我们首先定义了一个菜单树形结构el-tree，用于导航到不同的子组件。每个菜单项都绑定了一个id，当用户点击菜单项时，根据id切换当前显示的子组件。使用动态组件component来显示当前的子组件，并监听submit事件将子组件的数据保存到formData对象中。最终在点击提交按钮时，将formData对象提交给后端。

需要注意的是，在实际开发中，我们需要根据具体需求对页面布局和样式进行相应的调整。另外，我们也需要考虑如何处理异步请求、数据验证、异常处理等问题，以确保应用的稳定性和可靠性。

调整需求：请注意，在所有子组件输入数据，但是不提交，只在其中一个子组件中点击提交，会获取所有子组件的数据提交给后端

根据您的调整后的需求，我们需要将子组件的数据保存到一个共享的数据对象中，而不是在每个子组件中保存独立的数据对象。当用户在任意一个子组件中点击提交按钮时，我们需要将共享的数据对象中所有子组件的数据一并提交给后端。这可以通过Vue的事件总线机制来实现。

以下是一个示例代码，你可以根据实际需要进行修改：

<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-button type="primary" @click="handleSubmit">Submit</el-button>
      </el-main>
    </el-container>
  </div>
</template>

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

export default {
  data() {
    return {
      menu: [
        {
          id: 1,
          text: "Component 1",
        },
        {
          id: 2,
          text: "Component 2",
        },
      ],
      currentComponent: null,
      sharedData: {},
    };
  },
  components: {
    component1,
    component2,
  },
  methods: {
    handleNodeClick(node) {
      switch (node.id) {
        case 1:
          this.currentComponent = "component1";
          break;
        case 2:
          this.currentComponent = "component2";
          break;
        default:
          break;
      }
    },
    handleComponentSubmit(data) {
      Vue.set(this.sharedData, this.currentComponent, data);
    },
    handleSubmit() {
      console.log(this.sharedData);
      // 将 sharedData 提交给后端
    },
  },
};
</script>

在这个示例中，我们使用Vue的事件总线机制Vue.set将子组件的数据保存到一个共享的数据对象sharedData中。在点击最终提交按钮时，我们可以将sharedData对象中的所有数据一并提交给后端。

需要注意的是，在实际开发中，我们需要根据具体需求对事件总线的使用进行相应的管理和维护，以避免出现意外的数据修改和内存泄漏问题。另外，我们也需要考虑如何处理异步请求、数据验证、异常处理等问题，以确保应用的稳定性和可靠性。
组子组件：

<template>
  <el-form :model="formData" ref="form" @submit.native.prevent>
    <el-form-item label="Name">
      <el-input v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="Email">
      <el-input v-model="formData.email"></el-input>
    </el-form-item>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: "",
        email: "",
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$emit("submit", this.formData);
    },
  },
};
</script>

你理解错了，其他子组件只是输入数据，并没有点击提交按钮

非常抱歉，我误解了你的需求。在其他子组件输入数据但没有提交的情况下，点击某一个子组件的提交按钮需要获取所有子组件的数据并一并提交给后端。

为了实现这个需求，我们需要在父组件中维护一个包含所有子组件数据的共享数据对象，并且需要监听所有子组件的表单数据变化，以便在子组件没有点击提交按钮时也能获取其数据。在子组件点击提交按钮时，我们只需要将共享数据对象作为参数传递给父组件即可。以下是相应代码的修改部分：

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

<script>
import Component1 from "@/components/Component1.vue";
import Component2 from "@/components/Component2.vue";
import Component3 from "@/components/Component3.vue";

export default {
  data() {
    return {
      treeData: [
        {
          label: "Component 1",
          id: "component1",
        },
        {
          label: "Component 2",
          id: "component2",
        },
        {
          label: "Component 3",
          id: "component3",
        },
      ],
      currentComponent: "",
      sharedData: {}, // 维护所有子组件的数据
    };
  },
  components: {
    Component1,
    Component2,
    Component3,
  },
  methods: {
    handleNodeClick(data) {
      switch (data.id) {
        case "component1":
          this.currentComponent = "component1";
          break;
        case "component2":
          this.currentComponent = "component2";
          break;
        case "component3":
          this.currentComponent = "component3";
          break;
        default:
          break;
      }
    },
    handleSubmit(data) {
      this.$set(this.sharedData, this.currentComponent, data);
    },
    submitAllData() {
      // 将共享数据对象作为参数提交给后端
      // ...
    },
  },
  mounted() {
    // 监听所有子组件的表单数据变化
    this.$watch(
      "sharedData",
      (newVal) => {
        console.log("sharedData changed", newVal);
      },
      { deep: true }
    );
  },
};
</script>

好的，我继续补充示例子组件的代码。这里假设我们有三个子组件，每个组件都有自己的表单，用户可以在表单中输入数据。当用户在其中一个组件中点击提交按钮时，我们需要将所有子组件的表单数据一并提交给父组件。

这里我使用了ElementUI的el-form和el-form-item组件来构建表单，同时为了方便起见，我使用了v-model来双向绑定数据。以下是示例代码：

<!-- Component1.vue -->
<template>
  <el-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-item>
      <el-button type="primary" @click="handleSubmit">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        field1: "",
        field2: "",
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$emit("submit", this.formData);
    },
  },
};
</script>


<!-- Component2.vue -->
<template>
  <el-form>
    <el-form-item label="Field 3">
      <el-input v-model="formData.field3"></el-input>
    </el-form-item>
    <el-form-item label="Field 4">
      <el-input v-model="formData.field4"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        field3: "",
        field4: "",
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$emit("submit", this.formData);
    },
  },
};
</script>


<!-- Component3.vue -->
<template>
  <el-form>
    <el-form-item label="Field 5">
      <el-input v-model="formData.field5"></el-input>
    </el-form-item>
    <el-form-item label="Field 6">
      <el-input v-model="formData.field6"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        field5: "",
        field6: "",
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$emit("submit", this.formData);
    },
  },
};
</script>

在这些子组件中，我们使用formData对象来维护表单数据，然后在handleSubmit方法中使用this.$emit(“submit”, this.formData)将表单数据提交给父组件。注意，在这个示例中，我们没有做任何验证，实际上应该在提交之前对表单数据进行验证。

你理解错了需要，组件都只输入不提交，但是在其中一个组件点击提交会获取到所有组件的数据
针对这个需求，我们可以考虑使用一个公共的form-data对象来保存所有子组件的表单数据，然后在其中一个子组件点击提交按钮时，将form-data对象中的数据提交给后端。

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

<script>
import ComponentA from "./components/ComponentA.vue";
import ComponentB from "./components/ComponentB.vue";
import ComponentC from "./components/ComponentC.vue";

export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC,
  },
  data() {
    return {
      treeData: [
        {
          label: "Component A",
          key: "a",
          isLeaf: true,
        },
        {
          label: "Component B",
          key: "b",
          isLeaf: true,
        },
        {
          label: "Component C",
          key: "c",
          isLeaf: true,
        },
      ],
      currentComponent: "",
      formData: {},
    };
  },
  methods: {
    handleNodeClick(node) {
      switch (node.key) {
        case "a":
          this.currentComponent = "ComponentA";
          break;
        case "b":
          this.currentComponent = "ComponentB";
          break;
        case "c":
          this.currentComponent = "ComponentC";
          break;
        default:
          break;
      }
    },
  },
};
</script>

在父组件中，我们定义了一个formData对象来保存所有子组件的表单数据，并将其作为prop传递给所有子组件。这样，所有子组件都可以访问这个formData对象，将自己的表单数据添加到其中。

在其中一个子组件中点击提交按钮时，我们可以直接将formData对象中的数据提交给后端。

需要注意的是，在这个示例中，我们使用了Vue的动态组件来根据用户在左侧菜单中点击的节点来动态渲染对应的子组件。在组件A、B、C中，我们都将formData对象作为prop接收，并在输入数据时将表单数据添加到其中。在其中一个组件中点击提交按钮时，我们可以直接将formData对象中的数据提交给后端。
示例子组件代码

ComponentA.vue

<template>
  <div>
    <h2>Component A</h2>
    <form @submit.prevent>
      <label>Input 1:</label>
      <input type="text" v-model="formData.input1" />
      <br />
      <label>Input 2:</label>
      <input type="text" v-model="formData.input2" />
      <br />
      <button @click="handleSubmit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    formData: Object,
  },
  data() {
    return {};
  },
  methods: {
    handleSubmit() {
      // 不需要在这里提交数据
    },
  },
};
</script>

ComponentB.vue

<template>
  <div>
    <h2>Component B</h2>
    <form @submit.prevent>
      <label>Input 1:</label>
      <input type="text" v-model="formData.input3" />
      <br />
      <label>Input 2:</label>
      <input type="text" v-model="formData.input4" />
      <br />
      <button @click="handleSubmit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    formData: Object,
  },
  data() {
    return {};
  },
  methods: {
    handleSubmit() {
      // 不需要在这里提交数据
    },
  },
};
</script>

ComponentC.vue

<template>
  <div>
    <h2>Component C</h2>
    <form @submit.prevent>
      <label>Input 1:</label>
      <input type="text" v-model="formData.input1" />
      <br />
      <label>Input 2:</label>
      <input type="text" v-model="formData.input2" />
      <br />
      <label>Input 3:</label>
      <input type="text" v-model="formData.input3" />
      <br />
      <label>Input 4:</label>
      <input type="text" v-model="formData.input4" />
      <br />
      <button @click="handleSubmit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    formData: Object,
  },
  data() {
    return {};
  },
  methods: {
    handleSubmit() {
      // 在这里提交数据
      this.$emit("submit", this.formData);
    },
  },
};
</script>

在这个示例中，我们在所有子组件中定义了一个表单，每个表单有若干个输入框和一个提交按钮。在子组件A和B中，我们只需要输入表单，不需要提交数据。在子组件C中，我们输入表单后可以点击提交按钮，将所有子组件的数据一并提交给后端。

需要注意的是，在子组件C中，我们定义了一个handleSubmit方法，在点击提交按钮时会将formData对象作为参数通过$emit方法传递给父组件。这样父组件就可以获取到所有子组件的表单数据，并将其提交给后端。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值