vue实现多行多个表单

Vue 实现多行多个表单的方法

使用 v-for 动态生成表单

通过 v-for 指令循环生成多行表单，结合数组管理表单数据。适合动态增减表单行的场景。

<template>
  <div>
    <div v-for="(form, index) in forms" :key="index">
      <input v-model="form.name" placeholder="姓名">
      <input v-model="form.age" placeholder="年龄">
      <button @click="removeForm(index)">删除</button>
    </div>
    <button @click="addForm">添加表单</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      forms: [{ name: '', age: '' }]
    }
  },
  methods: {
    addForm() {
      this.forms.push({ name: '', age: '' })
    },
    removeForm(index) {
      this.forms.splice(index, 1)
    }
  }
}
</script>

使用组件化方式

将单行表单封装为组件，通过父组件管理多行数据。适合复杂表单结构。

<!-- FormRow.vue -->
<template>
  <div>
    <input v-model="formData.name">
    <input v-model="formData.age">
  </div>
</template>

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

<!-- Parent.vue -->
<template>
  <div>
    <FormRow 
      v-for="(form, index) in forms"
      :key="index"
      :formData="form"
    />
    <button @click="addRow">添加行</button>
  </div>
</template>

使用 Vuex 管理表单状态

当表单需要跨组件共享状态时，可以使用 Vuex 集中管理。

// store.js
export default new Vuex.Store({
  state: {
    forms: []
  },
  mutations: {
    ADD_FORM(state, form) {
      state.forms.push(form)
    }
  }
})

表单验证处理

结合 vee-validate 或自定义验证方法实现多行表单验证。

<template>
  <div v-for="(item, index) in items">
    <input 
      v-model="item.value" 
      :name="`items[${index}].value`"
      v-validate="'required'"
    >
    <span>{{ errors.first(`items[${index}].value`) }}</span>
  </div>
</template>

提交多行表单数据

处理表单提交时，将数组格式的数据发送到后端。

methods: {
  submit() {
    axios.post('/api/submit', { forms: this.forms })
      .then(response => {
        // 处理响应
      })
  }
}