Vue防止表单重复提交

       在提交表单时按钮点击一次后，为防止重复表单提交，需要将提交按钮置灰。直到处理后台处理完返回为止。这需要操作前端提交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", {})}

}