vue页面按钮呈现loading加载状态,与avue-form中loading使用问题
按钮点击时呈现加载状态,防止其他误操作。1.效果图2.代码实现(1)按钮添加::loading="loading.listLoading"<el-button type="primary" style="margin-top: 12px;" :loading="loading.listloading" @click="expScorePacks()">导出(2)定义 loading.l
·
按钮点击时呈现加载状态,防止其他误操作。
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()方法即可
工作之余,匆匆记录,有问题欢迎讨论。
更多推荐
已为社区贡献3条内容
所有评论(0)