vue获取页面数据结束前添加loading，结束后再显示页面

vue获取页面数据结束前添加loading，结束后再显示页面

今天做项目的时候，后端提供了一个接口返回的数据量很大，获取完整的数据需要一定的时间，而没有完整的数据是没有办法显示正常的界面的，所以就需要添加一个loading的效果。

我直接是选择使用element-ui提供的loading组件来实现，实现过程如下（较为简单，只是记录一下，方便以后使用）：

首先，vue创建页面的函数为created()方法，这个方法内部调用我们需要的数据的接口。

我需要实现的效果就是这个接口获取好数据之前要有个loading等待的效果，用以下步骤添加：

• 引入loading组件

	import { Loading} from "element-ui";

• 启用loading服务

    let loadingInstance = Loading.service({  //启动loading服务
      target: document.getElementById("detailClass"),
      fullscreen: true,
    });

• 获取完数据化关闭loading服务

	loadingInstance.close()  //关闭loading

• 完整代码结构如下
  
  这样就实现了这样的一个简单的功能，关于loading的更多用法可以去element-ui官网上去看，可以修改loading样式以及一些其他的使用方法。

• element-ui官网：https://element.eleme.cn/#/zh-CN