vue实现多行提交

Vue 实现多行提交的方法

使用 v-for 动态生成表单

通过 v-for 指令动态渲染多个表单行，结合 v-model 实现数据绑定。

<template>
  <div>
    <div v-for="(item, index) in formItems" :key="index">
      <input v-model="item.name" placeholder="名称">
      <input v-model="item.value" placeholder="值">
      <button @click="removeItem(index)">删除</button>
    </div>
    <button @click="addItem">添加行</button>
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItems: [{ name: '', value: '' }]
    }
  },
  methods: {
    addItem() {
      this.formItems.push({ name: '', value: '' })
    },
    removeItem(index) {
      this.formItems.splice(index, 1)
    },
    submitForm() {
      console.log('提交数据:', this.formItems)
      // 这里添加提交到服务器的逻辑
    }
  }
}
</script>

使用计算属性处理提交数据

通过计算属性对表单数据进行预处理，确保提交格式符合要求。

computed: {
  formattedData() {
    return this.formItems.map(item => ({
      fieldName: item.name,
      fieldValue: item.value
    }))
  }
},
methods: {
  submitForm() {
    axios.post('/api/submit', this.formattedData)
      .then(response => {
        console.log('提交成功', response)
      })
  }
}

表单验证

在提交前添加表单验证逻辑，确保数据完整性。

methods: {
  validateForm() {
    return this.formItems.every(item => 
      item.name.trim() !== '' && item.value.trim() !== ''
    )
  },
  submitForm() {
    if (!this.validateForm()) {
      alert('请填写所有字段')
      return
    }
    // 提交逻辑
  }
}

使用第三方组件库

对于复杂需求，可以考虑使用 Element UI 或 Vuetify 等 UI 库提供的表格表单组件。

<template>
  <el-form :model="dynamicForm">
    <el-table :data="dynamicForm.items">
      <el-table-column prop="name" label="名称">
        <template #default="scope">
          <el-input v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="值">
        <template #default="scope">
          <el-input v-model="scope.row.value"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="removeItem(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="addItem">添加行</el-button>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

响应式数据管理

对于大型表单，建议使用 Vuex 或 Pinia 管理状态，确保数据流动清晰。

// 在 store 中定义
state: {
  formItems: []
},
mutations: {
  ADD_FORM_ITEM(state, item) {
    state.formItems.push(item)
  },
  REMOVE_FORM_ITEM(state, index) {
    state.formItems.splice(index, 1)
  }
}

以上方法可以根据实际需求组合使用，实现灵活的多行表单提交功能。