最终方案：e+elementui实现一个需求：1，页面左右布局，左侧为el-tree树形结构菜单，右侧为对应的子组件 2、每个子组件都有表单构成，用户可输入表单数据 3、父组件包括一个提交按钮，在

sunshineDD_DD

已于 2023-04-11 03:10:22 修改

阅读量941

点赞数

分类专栏：搜搜文章标签： elementui javascript vue.js

于 2023-04-11 03:05:59 首次发布

本文链接：https://blog.csdn.net/sunshineDD_DD/article/details/130073667

版权

搜搜专栏收录该内容

7 篇文章 0 订阅

订阅专栏

好的，下面是一个实现以上需求的 Vue.js 组件：

<template>
  <div class="container">
    <div class="menu">
      <el-tree :data="menuData" @node-click="handleMenuClick"></el-tree>
    </div>
    <div class="content">
      <component :is="currentComponent"></component>
    </div>
    <div class="submit">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'
import Component3 from './Component3.vue'

export default {
  name: 'MyComponent',
  components: {
    Component1,
    Component2,
    Component3,
  },
  data() {
    return {
      menuData: [
        {
          label: '组件1',
          name: 'component1',
        },
        {
          label: '组件2',
          name: 'component2',
        },
        {
          label: '组件3',
          name: 'component3',
        },
      ],
      currentComponent: '',
      componentData: {},
    };
  },
  methods: {
    handleMenuClick(data) {
      this.currentComponent = data.name;
    },
    handleSubmit() {
      console.log(this.componentData);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  height: 100%;
}
.menu {
  width: 200px;
}
.content {
  flex-grow: 1;
}
.submit {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
</style>

在这个组件中，左侧菜单使用了 Element UI 的 el-tree 组件，右侧内容区域使用了 Vue.js 的动态组件，根据当前选中的菜单项来动态加载不同的子组件。父组件中定义了一个 componentData 对象，用于保存各个子组件的表单数据。当点击提交按钮时，可以通过 console.log(this.componentData) 来获取所有子组件输入的数据。

注意，上面的代码中并没有实现子组件的表单，因为每个子组件的表单结构可能不同，具体的表单结构需要根据需求自行实现。不过，这个组件已经提供了一个框架，可以方便地进行扩展和修改。

好的，下面是针对之前提供的代码的一些完善：

在父组件中加入一个变量 selectedData，用于保存当前选中的菜单项的数据，以便在子组件中获取。

在子组件中加入表单，绑定表单数据和父组件中的 selectedData 变量。

在父组件中实现 handleSubmit 方法，遍历子组件中的表单数据，将数据保存到 componentData 对象中。

在父组件中通过 $refs 获取所有子组件的实例，以便在 handleSubmit 方法中调用子组件中的方法获取表单数据。

完善后的代码如下：

<template>
  <div class="container">
    <div class="menu">
      <el-tree :data="menuData" @node-click="handleMenuClick"></el-tree>
    </div>
    <div class="content">
      <component :is="currentComponent" ref="currentComponentRef"></component>
    </div>
    <div class="submit">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'
import Component3 from './Component3.vue'

export default {
  name: 'MyComponent',
  components: {
    Component1,
    Component2,
    Component3,
  },
  data() {
    return {
      menuData: [
        {
          label: '组件1',
          name: 'component1',
        },
        {
          label: '组件2',
          name: 'component2',
        },
        {
          label: '组件3',
          name: 'component3',
        },
      ],
      currentComponent: '',
      componentData: {},
      selectedData: null,
    };
  },
  methods: {
    handleMenuClick(data) {
      this.currentComponent = data.name;
      this.selectedData = data;
    },
    handleSubmit() {
      for (const componentRef in this.$refs) {
        if (this.$refs[componentRef].$options._componentTag === this.currentComponent) {
          this.componentData[this.currentComponent] = this.$refs[componentRef].getData();
          break;
        }
      }
      console.log(this.componentData);
    },
  },
};
</script>

<style>
.container {
  display: flex;
  height: 100%;
}
.menu {
  width: 200px;
}
.content {
  flex-grow: 1;
}
.submit {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
</style>

其中，Component1、Component2 和 Component3 是三个子组件，可以根据需要自行定义。在这里，我们为每个子组件添加了一个表单，用于输入数据。每个子组件都定义了一个 getData 方法，用于获取表单数据并返回给父组件。在父组件的 handleSubmit 方法中，我们首先遍历所有子组件的实例，找到当前选中的子组件，然后调用其 getData 方法获取表单数据，并将数据保存到 componentData 对象中。

希望这份代码可以帮助你完成你的需求。
好的，下面是三个示例子组件的代码：

Component1.vue：

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="form.gender">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Component1',
  data() {
    return {
      form: {
        name: '',
        gender: '',
        age: 0,
      },
    };
  },
  methods: {
    getData() {
      return this.form;
    },
  },
};
</script>

Component2.vue：

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input v-model="form.address"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Component2',
  data() {
    return {
      form: {
        phone: '',
        email: '',
        address: '',
      },
    };
  },
  methods: {
    getData() {
      return this.form;
    },
  },
};
</script>

Component3.vue：

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="工号">
        <el-input v-model="form.jobId"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="form.position"></el-input>
      </el-form-item>
      <el-form-item label="薪水">
        <el-input v-model.number="form.salary"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Component3',
  data() {
    return {
      form: {
        jobId: '',
        position: '',
        salary: 0,
      },
    };
  },
  methods: {
    getData() {
      return this.form;
    },
  },
};
</script>

这三个子组件分别包含了三个表单项，用于输入不同的数据。每个子组件都实现了一个 getData 方法，用于获取表单数据并返回给父组件。

继续，这里是否是现在，在所有子组件输入数据，父组件点击提交后，可以同时获取到所有自组建的额数据传给后端
是的，你可以在父组件中定义一个 submit 方法，在该方法中分别调用子组件的 getData 方法获取表单数据，并将所有数据组合成一个对象传递给后端。

例如，父组件代码可以类似如下：

<template>
  <div class="container">
    <el-row>
      <el-col :span="8">
        <el-tree :data="treeData" :props="treeProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="16">
        <component :is="currentComponent"></component>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Component1 from './Component1.vue';
import Component2 from './Component2.vue';
import Component3 from './Component3.vue';

export default {
  name: 'MyComponent',
  components: {
    Component1,
    Component2,
    Component3,
  },
  data() {
    return {
      treeData: [
        {
          label: '组件1',
          value: 'component1',
        },
        {
          label: '组件2',
          value: 'component2',
        },
        {
          label: '组件3',
          value: 'component3',
        },
      ],
      treeProps: {
        children: 'children',
        label: 'label',
      },
      currentComponent: 'Component1',
      formData: {},
    };
  },
  methods: {
    handleNodeClick(data) {
      this.currentComponent = data.value;
    },
    submit() {
      const component = this.$refs.component;
      const data = {};
      for (const ref in component) {
        if (component[ref].getData) {
          const componentData = component[ref].getData();
          Object.assign(data, componentData);
        }
      }
      console.log(data); // 打印数据
      // TODO：调用后端接口提交数据
    },
  },
};
</script>

在该代码中，我们定义了一个 submit 方法，该方法首先获取组件实例的引用，然后遍历所有子组件实例，判断该实例是否具有 getData 方法，如果有则调用该方法获取表单数据，并将数据对象与之前获取到的数据对象合并成一个对象。最后，我们在控制台中打印数据对象，以便进行调试和测试。你可以将 TODO 部分的代码替换为实际的后端接口调用代码，以实现提交数据到后端。

继续，这里还需要将父组件的数据传递给子组件作为表单数据

可以将父组件的数据作为 props 传递给子组件，以便子组件可以读取和修改该数据。在父组件中，我们可以在渲染子组件时将 formData 对象作为 props 传递给子组件。在子组件中，我们可以定义 props 来接收父组件传递的数据，并在表单中使用这些数据。

例如，我们可以将父组件代码改为如下：

<template>
  <div class="container">
    <el-row>
      <el-col :span="8">
        <el-tree :data="treeData" :props="treeProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="16">
        <component :is="currentComponent" :formData="formData"></component>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="submit">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Component1 from './Component1.vue';
import Component2 from './Component2.vue';
import Component3 from './Component3.vue';

export default {
  name: 'MyComponent',
  components: {
    Component1,
    Component2,
    Component3,
  },
  data() {
    return {
      treeData: [
        {
          label: '组件1',
          value: 'component1',
        },
        {
          label: '组件2',
          value: 'component2',
        },
        {
          label: '组件3',
          value: 'component3',
        },
      ],
      treeProps: {
        children: 'children',
        label: 'label',
      },
      currentComponent: 'Component1',
      formData: {},
    };
  },
  methods: {
    handleNodeClick(data) {
      this.currentComponent = data.value;
    },
    submit() {
      const component = this.$refs.component;
      const data = {};
      for (const ref in component) {
        if (component[ref].getData) {
          const componentData = component[ref].getData();
          Object.assign(data, componentData);
        }
      }
      console.log(data); // 打印数据
      // TODO：调用后端接口提交数据
    },
  },
};
</script>

在该代码中，我们在渲染子组件时添加了 :formData=“formData”，将 formData 对象作为 props 传递给子组件。现在，我们可以在子组件中定义 props 来接收 formData，例如：

export default {
  name: 'Component1',
  props: {
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {
        field1: '',
        field2: '',
      },
    };
  },
  methods: {
    getData() {
      return {
        field1: this.form.field1,
        field2: this.form.field2,
      };
    },
  },
};

在该代码中，我们定义了一个 formData props 来接收父组件传递的 formData 对象。在子组件的 data 方法中，我们定义了一个 form 对象，表示子组件的表单数据。在 getData 方法中，我们返回一个对象，该对象包含子组件表单中的数据，我们将该对象作为子组件的数据。

注意，每个子组件都应该实现 getData 方法，以便在父组件点击提交时获取子组件的表单数据。getData 方法返回一个对象，该对象应包含子组件表单中的数据。父组件的 submit 方法将获取每个子组件的数据，并将它们合并成一个对象，然后调用后端接口提交数据。

现在，我们可以为 Component2 和 Component3 子组件编写类似的代码。在这些组件中，我们也定义了 formData props 并将其用于表单数据。在 getData 方法中，我们返回表单数据。以下是 Component2 的示例代码：

export default {
  name: 'Component2',
  props: {
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {
        field1: '',
        field2: '',
      },
    };
  },
  methods: {
    getData() {
      return {
        field1: this.form.field1,
        field2: this.form.field2,
      };
    },
  },
};

以下是 Component3 的示例代码：

export default {
  name: 'Component3',
  props: {
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      form: {
        field1: '',
        field2: '',
      },
    };
  },
  methods: {
    getData() {
      return {
        field1: this.form.field1,
        field2: this.form.field2,
      };
    },
  },
};

现在，当父组件中的提交按钮被点击时，所有子组件中的表单数据将被合并并传递给后端进行处理。

sunshineDD_DD

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
最终方案：e+elementui实现一个需求：1，页面左右布局，左侧为el-tree树形结构菜单，右侧为对应的子组件 2、每个子组件都有表单构成，用户可输入表单数据 3、父组件包括一个提交按钮，在

在父组件的 handleSubmit 方法中，我们首先遍历所有子组件的实例，找到当前选中的子组件，然后调用其 getData 方法获取表单数据，并将数据保存到 componentData 对象中。在该代码中，我们定义了一个 submit 方法，该方法首先获取组件实例的引用，然后遍历所有子组件实例，判断该实例是否具有 getData 方法，如果有则调用该方法获取表单数据，并将数据对象与之前获取到的数据对象合并成一个对象。在子组件中加入表单，绑定表单数据和父组件中的 selectedData 变量。
复制链接

扫一扫