赞
踩
element组件添加加载loading状态,我想只要是程序员都应该知道,不知道的可以看element组件官网http://element-cn.eleme.io/#/zh-CN/component/installation。
我这边主要介绍async的作用以及为什么element添加加载loading状态会失败。(因为这个添加loading这个简单的任务我做了整整一天,最后发现与Ajax请求的async有关)
首先,loading加载必然是在表中定义(整个页面加载,可以观看element官网)
然后将loading在data中定义:
最后是向后台请求获取数据:
这时你会发现,你的loading明明加上去了,但页面加载数据的时候loading还是不显示加载状态,所以我查了会,原来是Ajax请求中async在作祟,下来我简单简述一下axync的作用:
- async.
- 默认是 true,即为异步方式,$.ajax执行后,会继续执行ajax后面的脚本,直到服务器端返回数据后,
- 触发$.ajax里的success方法,这时候执行的是两个线程。
-
- async 设置为 false,则所有的请求均为同步请求,在没有返回值之前,同步请求将锁住浏览器,用户
- 它操作必须等待请求完成才可以执行。
-
- 如果async设置为:true,异步操作,则不会等待ajax请求返回的结果,会直接执行ajax后面的语句。
- 如果async设置为:false, 同步操作,在没有返回值之前,alert(temp)是不会执行的。
解决方案:其实很简单,只要将 async: false,删除就ok了!
最后你会发现页面加载数据时会有加载状态。(刚练习写博客,不喜勿喷)!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。