这是我参与8月更文挑战的第6天，活动详情查看： 8月更文挑战”juejin.cn/post/698796…
思路：使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。
先看报错： Failed to resolve directive: loading
在table上直接加上v-loading = “loading”
要在 main.js 中添加：
import { Loading } from 'element-ui';
Vue.use(Loading.directive);
在table 表头中添加： v-loading="loading"
效果：
发现表头被遮盖了 不是想要的效果！
实现局部loading效果(不包含表头)
不在main.js中去引入 来到组件中引入
import { Loading } from 'element-ui';
在方法中：
// 表格数据
getTableData() {
this.loading && this.loading.close(); // 这里是为了防止还没有请求结束（loading未关闭）再次连续触发
// Loading.service(options); 是直接调用了
this.loading = Loading.service({
// lock: true, //锁定屏幕的滚动
text: "拼命加载中", //加载文案
backgroundColor: "rgba(55,55,55,0.4)", //背景色
spinner: "el-icon-loading", //加载图标
// 可以直接使用选择器名称，当然也可以用ref获取DOM结构，可以提前把DOM结构缓存起来，
// 这样频繁被触发的时候是不是就不会重新获取DOM了呢？好像可以提升一丢丢性能吧（个人理解）
target: document.querySelector(".el-table__body") //loading需要覆盖的DOM节点，默认为body
});
getyuyueTableData(this.formData)
.then(res => {
setTimeout(() => {
this.loading.close();
}, 500);
})
.catch(err => {
this.$message.error(err);
});
},
注意:要拿到dom就要在mounted（）中发送请求
this.loading && this.loading.close(); // 这里是为了防止还没有请求结束（loading未关闭）再次连续触发
- 添加这句代码就是预防出现下面连续点击发送请求的效果
