vue实现多行提交

Vue 实现多行提交的方法

在 Vue 中实现多行提交通常涉及表单处理、数据绑定和事件触发。以下是几种常见的实现方式：

使用 v-model 绑定表单数据

通过 v-model 绑定表单输入框的值，动态收集多行数据：

<template>
  <div>
    <textarea v-model="inputText" placeholder="输入多行内容"></textarea>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    }
  },
  methods: {
    submit() {
      console.log('提交内容:', this.inputText)
      // 处理提交逻辑
    }
  }
}
</script>

动态添加输入行

如果需要动态添加多个输入行，可以使用数组存储每行的值：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input v-model="items[index]" placeholder="输入内容">
      <button @click="removeItem(index)">删除</button>
    </div>
    <button @click="addItem">添加行</button>
    <button @click="submitAll">提交全部</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['']
    }
  },
  methods: {
    addItem() {
      this.items.push('')
    },
    removeItem(index) {
      this.items.splice(index, 1)
    },
    submitAll() {
      console.log('提交所有内容:', this.items)
      // 处理提交逻辑
    }
  }
}
</script>

使用组件实现复杂表单

对于更复杂的多行表单，可以创建可复用的表单组件：

<template>
  <div>
    <form-item 
      v-for="(item, index) in formItems" 
      :key="index" 
      :value="item"
      @update="updateItem(index, $event)"
      @remove="removeItem(index)"
    />
    <button @click="addItem">添加表单项</button>
    <button @click="submitForm">提交表单</button>
  </div>
</template>

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

export default {
  components: { FormItem },
  data() {
    return {
      formItems: ['']
    }
  },
  methods: {
    addItem() {
      this.formItems.push('')
    },
    removeItem(index) {
      this.formItems.splice(index, 1)
    },
    updateItem(index, value) {
      this.$set(this.formItems, index, value)
    },
    submitForm() {
      console.log('表单数据:', this.formItems)
      // 处理提交逻辑
    }
  }
}
</script>

表单验证

添加基本的表单验证确保多行内容符合要求：

<template>
  <div>
    <textarea 
      v-model="inputText" 
      placeholder="输入多行内容"
      :class="{ 'error': error }"
    ></textarea>
    <div v-if="error" class="error-message">{{ errorMessage }}</div>
    <button @click="validateAndSubmit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      error: false,
      errorMessage: ''
    }
  },
  methods: {
    validateAndSubmit() {
      if (!this.inputText.trim()) {
        this.error = true
        this.errorMessage = '内容不能为空'
        return
      }

      if (this.inputText.length > 500) {
        this.error = true
        this.errorMessage = '内容长度不能超过500字符'
        return
      }

      this.error = false
      this.submit()
    },
    submit() {
      console.log('验证通过，提交内容:', this.inputText)
      // 处理提交逻辑
    }
  }
}
</script>

<style>
.error {
  border: 1px solid red;
}
.error-message {
  color: red;
}
</style>

这些方法可以根据实际需求进行组合和扩展，实现各种多行提交场景。