当前位置：首页 > VUE

vue实现多行多个表单

2026-02-25 21:07:04VUE

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>

使用组件化方式

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

vue实现多行多个表单

<!-- 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 集中管理。

vue实现多行多个表单

// 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 => {
        // 处理响应
      })
  }
}

标签: 多个表单

分享给朋友：

vue表单实现

Vue 表单实现方法双向数据绑定使用 v-model 指令实现表单输入与应用状态的双向绑定，适用于各类表单控件。例如文本输入框： <input v-model="message" pla…

jquery表单

jQuery 表单操作 jQuery 提供了丰富的 API 用于表单操作，包括表单元素的选择、值获取与设置、事件处理等。表单元素选择使用 jQuery 选择器可以方便地选取表单元素： // 选…

php 实现表单验证

表单验证基础方法使用内置函数和条件判断进行基础验证，例如检查空值、长度限制等： $name = $_POST['name'] ?? ''; $email = $_POST['email'] ??…

vue表单实现全选

Vue 表单实现全选功能在 Vue 中实现表单全选功能，通常涉及一个全选复选框和多个子复选框。以下是实现方法：基本实现数据绑定使用 v-model 绑定全选复选框和子复选框的状态，子复选…

vue实现弹出表单

使用 Vue 实现弹出表单基础实现（基于 v-if 和 v-show）通过 v-if 或 v-show 控制表单的显示与隐藏，适合简单场景。 <template> <div…

jquery表单验证

jQuery 表单验证的实现方法使用 jQuery 实现表单验证可以通过原生 JavaScript 结合正则表达式，或借助插件如 jQuery Validation Plugin 完成。以下是两种常…

vue实现多行多个表单