一、区域加载
Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上。
<el-tablev-loading="loading":data="tableData"
>......
</el-table>二、整页加载
当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。
指令方式：
<el-buttontype="primary"@click="openFullScreen1"v-loading.fullscreen.lock="fullscreenLoading">指令方式
</el-button>服务方式：
openFullScreen2() {const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});setTimeout(() => {loading.close();}, 2000);
}通常我们在 axios 拦截器中，使用服务指令来全局添加 loading 信息。
// 新增蒙层
var loading// request拦截器
$http.interceptors.request.use(config => {if (config.loading !== false) { // 可配置不用蒙层，参考 src/api/base/goods.js 中 getPageQuery 方法。// 新增接口请求时蒙层loading = window.vm.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',})}return config
}, error => {// Do something with request errorconsole.log(error) // for debugPromise.reject(error)
})
三、自定义
在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。
<el-mainv-loading="loading"element-loading-background="rgba(0, 0, 0, 0.5)"element-loading-text="图标正在加载中"
>......
</el-main>更多详情，请查看：element-ui 之 loading 组件。