解决 按钮多次点击重复提交问题

业务开发出现点击确定出现两次调用,解决如下代码:

<el-button type="primary" @click="contractBtn" :disabled="isDisable">保 存</el-button>
<script>
    export default {
         return {
                isDisable: false,//重复提交
          },
          methods: {
           contractBtn() {
              this.isDisable = true;
                let contents = {
                    carFundProviderId:this.carFundProviderData.id,
                    title:this.title,
                    number:this.number,
                    startTime:this.startTime,
                    endTime:this.endTime,
                    useType:this.useType?this.useType:0,
                    hasGPS:{
                        maxPrice:this.hasMaxMoneny,
                        minPrice:this.hasMinMoneny,
                        rules:this.hasGPSData,
                    },
                    noGPS:{
                        maxPrice:this.noMaxMoneny,
                        minPrice:this.noMinMoneny,
                        rules:this.noGPSData,
                    },
                };
                return axios({
                    method: 'post',
                    url: `${api}/admin/contract/add`,
                    params: {
                        contents: aexEncrypt(contents)
                    },
                    data: this.filesList
                }).then(res => {
                    this.isDisable = false;
                    let data = JSON.parse(aesDecrypt(res.data.content));
                    if (data.code == 200) {
                        this._layerFn("添加成功");
                        setCookie("currentMenu", this.$route.meta.menu);
                        this.$router.push({name: 'providerList'});
                    } else if (data.code == 201) {
                        this._layerFn(data.msg)
                    } else if (data.code == 202) {
                        window.location.href = data.data.loginUrl
                    }
                }).catch(err => {
                    this._layerFn(err)

                });
        },
          } 
    }
</script>

最后还需要提醒大家一点,本篇文章中的例子仅供参考学习,切误将本篇文章中的代码直接使用在正式项目当中。希望以上代码对大家有所帮助。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容