elementplus 上下布局 elementui左右布局

转载

mob6454cc6ba5a5 2024-04-08 16:04:54

文章标签 elementplus 上下布局 vue.js elementui javascript 数据 文章分类 机器学习人工智能

帮我使用vue+elementui实现一个需求：1，页面左右布局，左侧为el-tree树形结构菜单，右侧为不同树节点对应的子组件页面 2、每个子组件中都由不同的表单项构成，可以让用户输入表单项并提交数据3、每个子组件页面都有提交按钮，在当前子组件页面点击提交，会将其他所有子组件的数据一并提交给后端

好的，以下是一个简单的实现方案：

首先，你需要创建一个包含左右布局的页面组件，使用Element UI的el-row和el-col组件可以轻松实现这个布局。左侧放置el-tree组件，右侧放置router-view组件。

<template>
  <el-row>
    <el-col :span="8">
      <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
    </el-col>
    <el-col :span="16">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

在这个组件中，我们使用了treeData数组来存储树形菜单的数据，handleNodeClick方法用来处理节点点击事件。

接下来，我们需要定义子组件和它们对应的路由。每个子组件都需要包含一个表单，可以使用Element UI的表单组件来实现。在表单中添加一个提交按钮，点击提交按钮时调用一个提交数据的方法。为了实现将其他子组件的数据一并提交的功能，我们可以使用Vuex来管理数据。

例如，我们定义了三个子组件，分别是ComponentA、ComponentB和ComponentC。在路由中定义这三个组件：

import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'

const router = new VueRouter({
  routes: [
    { path: '/componentA', component: ComponentA },
    { path: '/componentB', component: ComponentB },
    { path: '/componentC', component: ComponentC },
  ]
})

在每个子组件中，定义表单和提交按钮，以及提交数据的方法。为了实现将其他子组件的数据一并提交，我们在Vuex中定义一个存储所有子组件数据的对象，每次子组件提交数据时，将数据存储到这个对象中。

例如，在ComponentA中：

<template>
  <el-form>
    <el-form-item label="姓名">
      <el-input v-model="name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
    }
  },
  methods: {
    handleSubmit() {
      this.$store.commit('setData', { componentName: 'ComponentA', data: { name: this.name } })
    },
  },
}
</script>

在ComponentB和ComponentC中也类似。setData方法用来存储数据到Vuex中，它接收两个参数：componentName表示当前组件的名称，data表示要存储的数据对象。

在Vuex中定义一个名为data的对象来存储所有子组件的数据。在setData方法中，将接收到的数据存储到data对象中，同时在控制台输出当前所有子组件的数据，方便调试。

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    data: {
      ComponentA: {},
      ComponentB: {},
      ComponentC: {},
    },
  },
  mutations: {
    setData(state, { componentName, data }) {
      state.data[componentName] = data
      console.log('All data:', state.data)
    },
  },
})

export default store

最后，在handleNodeClick方法中，根据点击的节点的id属性，动态加载对应的子组件。

handleNodeClick(data) {
  const id = data.id
  let path = ''
  switch (id) {
    case '1':
      path = '/componentA'
      break
    case '2':
      path = '/componentB'
      break
    case '3':
      path = '/componentC'
      break
    default:
      break
  }
  this.$router.push(path)
}

这样，当用户点击树形菜单中的某个节点时，右侧就会显示对应的子组件，用户可以在子组件中填写表单数据并提交。每次提交时，子组件会将数据存储到Vuex中，同时在控制台输出当前所有子组件的数据。当用户在任意一个子组件中点击提交按钮时，所有子组件的数据都会一并提交给后端。

完整代码示例：（假设根组件的名称为App）

<template>
  <el-row>
    <el-col :span="8">
      <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
    </el-col>
    <el-col :span="16">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script>
import Vuex from 'vuex'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'

const store = new Vuex.Store({
  state: {
    data: {
      ComponentA: {},
      ComponentB: {},
      ComponentC: {},
    },
  },
  mutations: {
    setData(state, { componentName, data }) {
      state.data[componentName] = data
      console.log('All data:', state.data)
    },
  },
})

export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC,
  },
  data() {
    return {
      treeData: [
        {
          id: '1',
          label: '组件A',
        },
        {
          id: '2',
          label: '组件B',
        },
        {
          id: '3',
          label: '组件C',
        },
      ],
    }
  },
  methods: {
    handleNodeClick(data) {
      const id = data.id
      let path = ''
      switch (id) {
        case '1':
          path = '/componentA'
          break
        case '2':
          path = '/componentB'
          break
        case '3':
          path = '/componentC'
          break
        default:
          break
      }
      this.$router.push(path)
    },
  },
  store,
}
</script>

ComponentA代码示例：（注意提交按钮的点击事件handleSubmit）

<template>
  <el-form>
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model.number="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: '',
      },
    }
  },
  methods: {
    handleSubmit() {
      this.$store.commit('setData', {
        componentName: 'ComponentA',
        data: this.form,
      })
      console.log('Submit ComponentA data:', this.form)
    },
  },
}
</script>

ComponentB和ComponentC的代码结构与ComponentA类似，这里不再重复贴出。

完整代码示例：

App.vue

<template>
  <el-row>
    <el-col :span="8">
      <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
    </el-col>
    <el-col :span="16">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script>
import Vuex from 'vuex'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'

const store = new Vuex.Store({
  state: {
    data: {
      ComponentA: {},
      ComponentB: {},
      ComponentC: {},
    },
  },
  mutations: {
    setData(state, { componentName, data }) {
      state.data[componentName] = data
      console.log('All data:', state.data)
    },
  },
})

export default {
  components: {
    ComponentA,
    ComponentB,
    ComponentC,
  },
  data() {
    return {
      treeData: [
        {
          id: '1',
          label: '组件A',
        },
        {
          id: '2',
          label: '组件B',
        },
        {
          id: '3',
          label: '组件C',
        },
      ],
    }
  },
  methods: {
    handleNodeClick(data) {
      const id = data.id
      let path = ''
      switch (id) {
        case '1':
          path = '/componentA'
          break
        case '2':
          path = '/componentB'
          break
        case '3':
          path = '/componentC'
          break
        default:
          break
      }
      this.$router.push(path)
    },
  },
  store,
}
</script>

ComponentA.vue

<template>
  <el-form>
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model.number="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form:

修正需求：在其中一个子组件点击提交，其他子组件只是输入数据，未提交，但是可以在提交时获取到所有自组建的数据提交给后端
根据您的修改，修改后的需求如下：

页面左右布局，左侧为el-tree树形结构菜单，右侧为不同树节点对应的子组件页面。
每个子组件中都由不同的表单项构成，可以让用户输入表单项并提交数据。
每个子组件页面都有提交按钮，在当前子组件页面点击提交，只提交当前子组件的数据，其他子组件的数据不提交。
当任何一个子组件点击提交按钮时，都会将所有子组件的数据一起提交给后端。
根据这个需求，可以将所有子组件的数据存储在共享状态中，当任何一个子组件点击提交按钮时，就将所有子组件的数据一起提交给后端。因此，我们可以使用 Vuex 来实现共享状态，并在每个子组件中使用提交事件将当前组件的数据存储到 Vuex 状态中。

下面是修改后的代码示例：

App.vue：

<template>
  <el-row>
    <el-col :span="8">
      <el-tree :data="treeData" @node-click="handleNodeClick"></el-tree>
    </el-col>
    <el-col :span="16">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script>
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    data: {},
  },
  mutations: {
    setData(state, { componentName, data }) {
      state.data[componentName] = data
      console.log('All data:', state.data)
    },
  },
})

export default {
  data() {
    return {
      treeData: [
        {
          id: '1',
          label: '组件A',
        },
        {
          id: '2',
          label: '组件B',
        },
        {
          id: '3',
          label: '组件C',
        },
      ],
    }
  },
  methods: {
    handleNodeClick(data) {
      const id = data.id
      let path = ''
      switch (id) {
        case '1':
          path = '/componentA'
          break
        case '2':
          path = '/componentB'
          break
        case '3':
          path = '/componentC'
          break
        default:
          break
      }
      this.$router.push(path)
    },
  },
  store,
}
</script>

ComponentA.vue：

<template>
  <el-form>
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄">
      <el-input v-model.number="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: '',
      },
    }
  },
  methods: {
    handleSubmit() {
      this.$store.commit('setData', {
        componentName: 'ComponentA',
        data: this.form,
      })
      console.log('Submit ComponentA

ComponentB.vue：

<template>
  <el-form>
    <el-form-item label="学校">
      <el-input v-model="form.school"></el-input>
    </el-form-item>
    <el-form-item label="班级">
      <el-input v-model.number="form.class"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        school: '',
        class: '',
      },
    }
  },
  methods: {
    handleSubmit() {
      this.$store.commit('setData', {
        componentName: 'ComponentB',
        data: this.form,
      })
      console.log('Submit ComponentB')
    },
  },
}
</script>

ComponentC.vue：`

<template>
  <el-form>
    <el-form-item label="城市">
      <el-input v-model="form.city"></el-input>
    </el-form-item>
    <el-form-item label="街道">
      <el-input v-model="form.street"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        city: '',
        street: '',
      },
    }
  },
  methods: {
    handleSubmit() {
      this.$store.commit('setData', {
        componentName: 'ComponentC',
        data: this.form,
      })
      console.log('Submit ComponentC')
    },
  },
}
</script>

注意，以上示例中只是将数据存储到 Vuex 状态中，并没有实际提交数据给后端。您需要将提交事件的处理函数修改为实际提交数据给后端的代码，将数据发送到服务器并处理响应。另外，为了在 Vuex 中存储每个子组件的数据，您需要给每个组件的表单项添加一个唯一的名称，以便在提交事件处理函数中将数据与组件关联。例如，ComponentA.vue中的表单项可以修改为：

<el-input v-model="form.name" name="ComponentA.name"></el-input>
<el-input v-model.number="form.age" name="ComponentA.age"></el-input>

`其中 ComponentA.name 和 ComponentA.age 分别为每个表单项的名称。这样，在提交事件处理函数中，您可以通过表单项名称将数据与组件关联：``

```javascript
this.$store.commit('setData', {
  componentName: 'ComponentA',
  data: {
    name: this.form.ComponentA.name,
    age: this.form.ComponentA.age,
  },
})

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。