在提交表单时按钮点击一次后,为防止重复表单提交,需要将提交按钮置灰。直到处理后台处理完返回为止。这需要操作前端提交button的disabled属性。
<el-button v-no-more-click type="primary" icon="el-icon-circle-check" :diabled = "isCommit" @click="checkProblemCreate('ruledFormNew')" size="small" >确定</el-button >
在data定义中
data: function () { return { isCommit: false },
checkProblemCreate(formName) {
let _self = this;
_self.$refs[formName].validate((valid) => {
if (!valid) {
_self.$notify.error("表单校验不通过,无法提交");
return;
} else {
_self.saveProblemCreate();
}
});
},
saveProblemCreate() {
if(!this.isCommit){ this.isCommit = true; setTimeout(()=>{this.isCommit = false},5000); _self.$axiospost("/problem/create", {})}
}
相关推荐
先说对话框(Dialog)里的表单提交 错误方案 说起错误方案,比如,点击提交按钮,本地验证,验证通过立即让按钮不可点,这些没问题,而我的错误点概括是:在某个最后执行的回调函数的最后一行,我做了2个操作:1,...
好友使用vue技术封装了一个专门用于提交表单和下载文件的“防抖按钮”,其实现原理和使用方法看这里 https://blog.csdn.net/PursueExcellence/article/details/103903139。
主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细,需要的朋友可以参考下
vue1/2 ajax提交表单
作用是禁用提交按钮,防止表单重复提交 1、禁用/启用按钮 $("#btnSub").subLoading({enabled:false}) $("#btnSub").subLoading({enabled:true}) 2、禁用后定时启用 $("#btnSub").subLoading({enabled:false,timeout:...
Vue快速问卷表单
最近做一个表单弹出框,表单保存提交,但是,产品提出,用户不保存,而关闭弹出框时,要给出一个弹窗提示。这个功能,可以用watch监听表单数据。当数据表单发生变化,用户点击了关闭按钮,则根据监听结果来判断用户...
vue_form_design:基于Vue3.0的表单设计器
前端做后台管控系统,在某些接口请求时间过长的场景下,需要防止用户反复发起请求。 假设某场景下用户点击查询按钮后,后端响应需要长时间才能返回数据。那么要规避用户返回点击查询按钮无外乎是让用户无法在合理...
主要介绍了Vue form 表单提交+ajax异步请求+分页效果,需要的朋友可以参考下
基于Vue表单通用验证插件
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
2、动态设置表单排列样式; 3、使用slot,灵活修改元素; 4、组件可以直接使用,使用简单,方便,有使用示例和注释,上手快; 5、经过多个项目使用,功能稳定; 6、减少代码量,方便维护; 7、遇到使用问题可以随时...
1、使用Vue封装事件 body: ()>提交订单 方法: methods: { submitOrder() { // 处理逻辑 } } 2、使用原生JS事件 在数据data里面声明一个flag属性 data() { return { isSubmit: true; } } body: ...
vue xlsx表单导出
vue查询表单导出excel文件所需的js文件
基于vue+Iview实现动态表单组件,通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示,动态表格弹窗式维护。
antd+vue实现动态验证循环属性表单的思路 希望实现查询表单的某些属性可以循环验证必填项: 需求: 1.名称,对比项,备注必填,默认为一行,可增加多行 2.根据名称,动态请求对比项列表,名称变化时,清空该行...