前端vue+elementUi表单提交按钮防止多次提交

2024-05-22 阅读：1340 类型：前端分类：Vue 标签： Vue ElementUI

vue按钮防止多次提交在Vue中防止按钮多次提交可以通过几种方式实现，其中一种方法是使用本地状态变量来跟踪按钮的状态（禁用或启用）。以下是一个简单的示例：

1、前端代码

<template>
 <div>
 <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
  <el-form-item label="账号" prop="name">
    <el-input v-model="addForm.name" ></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password" >
    <el-input v-model="addForm.password" type="password"></el-input>
  </el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
  <el-button @click="addDialogVisible = false">取 消</el-button>
  <el-button type="primary" @click="addUser" :disabled="isSubmitting">确 定</el-button>
</span> 
 </div>
</template>

2、js代码：

<script>
export default {
 data() {
  return {
   isSubmitting: false,
  };
 },
 methods: {
  addUser() {
   if (this.isSubmitting) return;
   this.isSubmitting = true;
 
   // 模拟表单提交
   setTimeout(() => {
    console.log('Form submitted!');
    // 表单提交完成后，重置按钮状态
    this.isSubmitting = false;
   }, 2000);
  },
 },
};
</script>

在这个例子中，按钮初始化时不是禁用的。当用户点击按钮时，submitForm 方法被触发。在方法内部，我们检查 isSubmitting 的值。如果 isSubmitting 为 true，则说明正在进行提交操作，我们直接返回，不进行任何操作。如果 isSubmitting 为 false，我们将其设置为 true 并开始模拟表单提交（通过 setTimeout）。提交完成后，我们将 isSubmitting 设置回 false，以允许再次点击按钮。