好的,下面是一个使用Vue.js和Element UI库实现的示例代码,满足您描述的需求:
首先,在Vue.js中定义一个父组件,包含左侧的el-tree树形结构菜单和右侧的子组件,同时管理所有子组件的数据:
<template>
<div class="container">
<div class="left">
<el-tree
:data="treeData"
@node-click="handleNodeClick"
ref="tree"
></el-tree>
</div>
<div class="right">
<component :is="currentComponent"></component>
<el-button @click="submitData">提交</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
// 树形结构菜单的数据
],
currentComponent: null,
componentsData: {
} // 保存子组件的数据
};
},
methods: {
handleNodeClick(data) {
// 点击树节点时切换右侧子组件
this.currentComponent = data.component;
},
submitData() {
// 提交所有子组件的数据给后端
const componentData = [];
for (const key in this.componentsData) {