[JavaScript知识库]vue页面按钮点击后，呈现loading加载状态

按钮点击时呈现加载状态，防止其他误操作。
1.效果图

2.代码实现
（1）按钮添加：:loading="loading.listLoading"，由这个属性控制加载状态动画

<el-button type="primary" style="margin-top: 12px;" :loading="loading.listloading" @click="expScorePacks()">导出

（2）定义 loading.listLoading（true：为开启加载状态，false：关闭加载状态）

return{
        loading:{
          listloading: false,
        }
      }

（3）点击按钮时开启加载状态: this.loading.listLoading = true。将下列代码写在点击事件执行的一开始，触发加载动画演示呈现加载状态

 this.loading.listloading = true;
          this.$message({
            type: "warning",
            message: "数据正在导出，请耐心等待"
          });

(4)查询结束或抛出异常一定要关闭加载状态：this.loading.listLoading = false

if (data) {
              this.loading.listloading = false;
              this.$message({
                type: "success",
                duration: 10000,
                message: "操作成功"
              });

工作之余，匆匆记录，有问题欢迎讨论。