携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天 点击查看活动详情

前言

最近在学习vue-element-admin 做一个简单的爬虫数据管理后台，目前只有一个简单的数据导出excel表格的功能，但是导出的时候表格数据非常多，需要有好久接口才能返回数据，所以在前端需要加一个防抖的功能，就是需要限制按钮被快速点击两次，第一次点击需要禁用按钮触发点击函数，然后需要等到接口有数据返回才能接触这个禁用状态

代码

我想了两种方案，一是在按钮上加上禁止触发点击函数的状态，第二是在整个页面加一个模糊的遮罩。我先完成第一个方案。

实际Element官方的文档就直接给出了答案，只要使用这个加载中就可以实现第一个方案了，我还以为同时要加上这个禁用状态。

还是做一下简要的说明吧，首先需要绑定一个变量，这个变量在data中定义，给定一个默认的false的状态，然后在点击函数触发之后，Api请求之前改变这个变量为ture，然后这里会使用到ES6的语法，axios的finally设置这个值为默认false，主要的代码在下面：

...

<el-form-item>
  <el-button
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    type="primary"
    icon="el-icon-download"
    :loading="loading"
    @click="downloadExcel()"
  >下载数据</el-button>
</el-form-item>

...

data() {
  return {
        ...
        loading:false
        ...
          }
        }
...

methods: {
...
downloadExcel() {
  this.loading = true
  console.log(this.form_data)

  downloadExcel(this.form_data).then(res => {
    this.$message({
      type: 'success',
      message: '下载完成'
    })
  }).finally(() => {
    this.loading = false
  })
},
...
}
...

具体效果就不展示，非常简单，请求开始之前开始转圈圈，同时进行点击不会再次生效，等待excel完成下载就可以再次下载了

总结

今天稍微总结了一下在vue-element-admin非常简单非常常用的功能，可以说是非常贴心，人性化，不用过多的操作就时间了一个简单页面按钮防抖，接下来还会有更多的小功能分享。