按钮点击时呈现加载状态,防止其他误操作。
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: "操作成功"
              });

avue-form中按钮无需自己使用button来写上,自然loading样式也不用自己定义,最后关闭avue中loading的状态只需要在js中写上done()方法即可

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

Logo

前往低代码交流专区

更多推荐