当前位置：首页 > VUE

vue实现多表单

2026-03-10 10:25:12VUE

Vue 实现多表单的方法

在 Vue 中实现多表单可以通过多种方式完成，以下是几种常见的实现方法：

动态表单渲染

通过 v-for 动态渲染多个表单，每个表单绑定独立的数据对象。数据可以存储在数组中，每个表单对应数组中的一个对象。

<template>
  <div v-for="(form, index) in forms" :key="index">
    <input v-model="form.name" placeholder="姓名">
    <input v-model="form.email" placeholder="邮箱">
  </div>
</template>

<script>
export default {
  data() {
    return {
      forms: [
        { name: '', email: '' },
        { name: '', email: '' }
      ]
    }
  }
}
</script>

组件化表单

将单个表单封装为组件，通过父组件管理多个表单实例。这种方式适合表单结构复杂或需要复用的场景。

<template>
  <div>
    <FormComponent v-for="(form, index) in formCount" :key="index" />
  </div>
</template>

<script>
import FormComponent from './FormComponent.vue'

export default {
  components: { FormComponent },
  data() {
    return {
      formCount: 3
    }
  }
}
</script>

表单数据集中管理

使用 Vuex 或 Pinia 集中管理表单数据，适合多个表单需要共享或同步数据的场景。

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    forms: [
      { id: 1, name: '', email: '' },
      { id: 2, name: '', email: '' }
    ]
  },
  mutations: {
    updateForm(state, { id, key, value }) {
      const form = state.forms.find(f => f.id === id)
      if (form) form[key] = value
    }
  }
})

// 组件中使用
<template>
  <div v-for="form in $store.state.forms" :key="form.id">
    <input 
      :value="form.name"
      @input="$store.commit('updateForm', { id: form.id, key: 'name', value: $event.target.value })"
    >
  </div>
</template>

表单验证

使用 Vuelidate 或 VeeValidate 为每个表单添加独立的验证规则。

import { required, email } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core'

export default {
  setup() {
    const forms = ref([
      { name: '', email: '' },
      { name: '', email: '' }
    ])

    const rules = {
      name: { required },
      email: { required, email }
    }

    const v$ = useVuelidate(rules, forms)

    return { forms, v$ }
  }
}

表单提交处理

为每个表单设置独立的提交方法，或批量提交所有表单数据。

vue实现多表单

methods: {
  submitForm(index) {
    const formData = this.forms[index]
    // 提交单个表单
  },
  submitAll() {
    // 提交所有表单
    this.forms.forEach(form => {
      // 提交逻辑
    })
  }
}