Vue中实现避免按钮多次点击造成发送多次重复请求
store文件中设置一个变量,全局管理按钮的禁用和解除禁用,方便组件之间的通信select.vue发送表单组件,表单没有填写完整时也要将按钮禁用解除<Button type="primary" :disabled="this.$store.state.isDisable" @click="filterBtn('form')" icon="ios-search">筛选</Butto
·
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))
},
}
更多推荐
已为社区贡献8条内容
所有评论(0)