vue实现新增表单

Vue 新增表单实现方法

使用 v-model 绑定表单数据

在 Vue 中通过 v-model 指令实现表单数据的双向绑定。在 data 中定义表单数据对象，每个表单项对应一个属性。

data() {
  return {
    formData: {
      name: '',
      age: '',
      email: ''
    }
  }
}

模板中使用 v-model 绑定到各个表单项：

<input v-model="formData.name" placeholder="姓名">
<input v-model="formData.age" placeholder="年龄" type="number">
<input v-model="formData.email" placeholder="邮箱" type="email">

表单提交处理

创建提交方法处理表单数据，通常需要验证数据后通过 API 提交到后端。

methods: {
  submitForm() {
    if(this.validateForm()) {
      // 调用API提交数据
      axios.post('/api/users', this.formData)
        .then(response => {
          alert('新增成功');
          this.resetForm();
        })
        .catch(error => {
          console.error('提交失败', error);
        });
    }
  }
}

表单验证

可以使用 Vue 的 computed 属性或 watch 实现简单验证，或集成第三方验证库如 VeeValidate。

methods: {
  validateForm() {
    if(!this.formData.name) {
      alert('姓名不能为空');
      return false;
    }
    if(!this.formData.email.includes('@')) {
      alert('邮箱格式不正确');
      return false;
    }
    return true;
  }
}

表单重置

提交成功后通常需要重置表单数据。

methods: {
  resetForm() {
    this.formData = {
      name: '',
      age: '',
      email: ''
    }
  }
}

使用 Element UI 等组件库

如果使用 Element UI，可以简化表单开发：

<el-form :model="formData" :rules="rules" ref="form">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model="formData.age" type="number"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

data() {
  return {
    rules: {
      name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
      age: [{ type: 'number', message: '年龄必须为数字', trigger: 'blur' }]
    }
  }
}

响应式表单处理

对于复杂表单，可以使用 Vuex 管理状态，或采用 Composition API 的 reactive 和 ref。

import { reactive } from 'vue';

setup() {
  const formData = reactive({
    name: '',
    age: '',
    email: ''
  });

  return { formData };
}