防止表格中的单行按钮被频繁点击 前端实例讲解~

在网页开发过程中，经常遇到按钮被频繁点击造成请求重复的问题，可以采用一个策略：设置定时器setTimeout，点击一次后让按钮灰掉（disable），暂时不可以用，一段时间后再启用。

如果只有单个按钮，直接设置定时器即可，若是存在于表格中的多个按钮，需要一一进行处理。

1、给表格中的每个对象都设置disabled属性，默认为false

this.tableData.forEach(v=>{this.$set(v, 'disabled', false)})

2、对按钮的disabled参数进行绑定，同时绑定点击事件

<el-table-column label="操作"><template slot-scope="scope"><el-button @click="nowPush(scope.row)" :disabled="scope.row.disabled" size="mini" type="primary">立即推送</el-button></template></el-table-column>

3、设置定时器，每点击一次按钮，将其置灰，5s后重新启用

nowPush(row){// 获取推送时间和当前时间，当再次点击时，时间间隔大于10min时才有效let notifyDateTimeStamp = row.notifyDateTimeStamplet max = notifyDateTimeStamp + 10 * 60 * 1000let now = Date.now()if(now < max) {this.$message.info('10分钟内不能重复推送')return}this.$getAxios({row.notifyConfigId}, '/permission-center/notifyConfig/resendMessage').then(() => {this.$message.success('推送成功!')this.tableData.forEach(v=>{if(v === row){v.disabled = truesetTimeout(()=>{v.disabled = false},5000)}})})}