Vue中实现避免按钮多次点击造成发送多次重复请求

tech2024-07-19  68

store文件中设置一个变量,全局管理按钮的禁用和解除禁用,方便组件之间的通信 select.vue发送表单组件,表单没有填写完整时也要将按钮禁用解除

<Button type="primary" :disabled="this.$store.state.isDisable" @click="filterBtn('form')" icon="ios-search">筛选</Button> methods: { filterBtn (name) { this.$store.state.isDisable = true this.$refs[name].validate((valid) => { if (valid) { this.$store.state.chartForm = this.requestData() this.$Message.success( { content:'发送请求成功!', duration:3, } ); } else { this.$Message.error('请求失败,请检查是否完整填写表单!'); this.$store.state.isDisable = false //解除按钮禁用 } }) } }

lineChart.vue获取数据显示曲线组件,不论获取到后端怎样的数据,都将按钮禁用解除,置为false

methods: { getData(){ this.axios.post('/api/search/getgraph/predict/linechart', JSON.stringify(this.form), {headers:{'Content-Type':'application/json;charset=UTF-8'}}).then(result => { console.log("linePredictData:",result.data.data.coordinate) ........ if (result.data.code === 200 && result.data.data.coordinate.length > 1) { ....... this.flag = true this.$Message.success( { content:'预测曲线更新完成', duration: 8, closable: true } ); this.$store.state.isDisable = false //解除按钮禁用 this.myChart.clear() this.init() } else if(result.data.code === 200 && result.data.data.coordinate.length === 1){ this.$Message.info({ content: '此时间段内无数据,请重新选择', top:100, duration: 8, closable: true }); this.$store.state.isDisable = false //解除按钮禁用 this.myChart.clear() this.init() }else if(result.data.data === null){ this.flag = false this.$Message.error({ content: '预测模块超时,请联系预测人员', duration: 8, closable: true }); this.$store.state.isDisable = false //解除按钮禁用 } }).catch((error) => console.log(error)) }, }
最新回复(0)