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

2019-05-27  本文已影响0人  zsanpang

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

<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>

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

上一篇下一篇

猜你喜欢

热点阅读