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: "操作成功"});

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