vue实现重置和确定

Vue 实现重置和确定功能

在 Vue 中实现重置和确定功能通常涉及表单操作，可以通过以下方法完成：

重置功能

methods: {
  resetForm() {
    this.formData = {
      // 初始值
    };
  }
}

在模板中绑定按钮点击事件：

<button @click="resetForm">重置</button>

确定功能

methods: {
  submitForm() {
    // 表单验证
    if (this.validateForm()) {
      // 提交逻辑
      console.log('提交数据:', this.formData);
    }
  },
  validateForm() {
    // 验证逻辑
    return true;
  }
}

在模板中绑定按钮点击事件：

<button @click="submitForm">确定</button>

使用 Element UI 的实现方式

如果使用 Element UI 组件库，可以更简洁地实现：

<el-form ref="form" :model="formData">
  <!-- 表单字段 -->
  <el-form-item>
    <el-button @click="resetForm">重置</el-button>
    <el-button type="primary" @click="submitForm">确定</el-button>
  </el-form-item>
</el-form>

methods: {
  resetForm() {
    this.$refs.form.resetFields();
  },
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 提交逻辑
      }
    });
  }
}

注意事项

• 重置功能会恢复表单到初始状态
• 确定功能通常需要先进行表单验证
• 对于复杂表单，建议使用 Vuex 管理状态
• 异步提交时添加 loading 状态提升用户体验