当前位置：首页 > VUE

vue实现表单分组

2026-02-17 22:59:30VUE

Vue 表单分组实现方法

使用 `v-for` 动态渲染表单组

通过数组数据结构管理分组，利用 v-for 循环渲染多个表单组：

<template>
  <div v-for="(group, index) in formGroups" :key="index">
    <h3>{{ group.title }}</h3>
    <input v-model="group.fields.name" placeholder="姓名">
    <input v-model="group.fields.email" placeholder="邮箱">
    <button @click="removeGroup(index)">删除组</button>
  </div>
  <button @click="addGroup">添加新组</button>
</template>

<script>
export default {
  data() {
    return {
      formGroups: [
        {
          title: '主要联系人',
          fields: { name: '', email: '' }
        }
      ]
    }
  },
  methods: {
    addGroup() {
      this.formGroups.push({
        title: `分组 ${this.formGroups.length + 1}`,
        fields: { name: '', email: '' }
      })
    },
    removeGroup(index) {
      this.formGroups.splice(index, 1)
    }
  }
}
</script>

使用组件封装表单组

创建可复用的表单组组件实现模块化管理：

<!-- FormGroup.vue -->
<template>
  <div class="form-group">
    <h3>{{ title }}</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

父组件调用方式：

<template>
  <FormGroup title="基本信息">
    <input v-model="user.name">
    <input v-model="user.age">
  </FormGroup>

  <FormGroup title="联系信息">
    <input v-model="user.phone">
    <input v-model="user.address">
  </FormGroup>
</template>

使用 Vuex 管理分组状态

对于复杂应用，可通过 Vuex 集中管理表单组状态：

// store.js
export default new Vuex.Store({
  state: {
    formGroups: [
      {
        id: 1,
        fields: { /* ... */ }
      }
    ]
  },
  mutations: {
    ADD_GROUP(state, payload) {
      state.formGroups.push(payload)
    }
  }
})

组件中通过 mapState 和 mapMutations 使用：

<template>
  <div v-for="group in formGroups" :key="group.id">
    <!-- 表单内容 -->
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['formGroups'])
  },
  methods: {
    ...mapMutations(['ADD_GROUP'])
  }
}
</script>

表单验证集成

结合 vee-validate 实现分组验证：

<ValidationObserver v-slot="{ invalid }">
  <div v-for="(group, index) in groups" :key="index">
    <ValidationProvider 
      :name="`name-${index}`" 
      rules="required"
      v-slot="{ errors }">
      <input v-model="group.name">
      <span>{{ errors[0] }}</span>
    </ValidationProvider>
  </div>
  <button :disabled="invalid">提交</button>
</ValidationObserver>

响应式布局优化

通过 CSS Grid 或 Flexbox 实现分组布局：

vue实现表单分组

.form-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.form-group {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 8px;
}