目录
官方地址区域加载自定义整页加载服务方式全局引入单独引入说明Options官方地址
https://element.eleme.io/#/zh-CN/component/loading
区域加载
在表格等容器中加载数据时显示。
Element提供了两种调用Loading的方法：
指令服务
对于自定义指令v-loading，只需要绑定Boolean即可。
默认状况下，Loading遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至DOM中的body上。
<el-tablev-loading="loading":data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
<script>export default {data() {return {tableData: [{date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],loading: true};}};</script>
自定义
在绑定了v-loading指令的元素上添加
element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方element-loading-spinner用来设定图标类名element-loading-background用来设定背景色值。
<template><el-tablev-loading="loading"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)":data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template>
<script>export default {data() {return {tableData: [{date: '-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],loading: true};}};</script>
整页加载
当使用指令方式时，
全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），锁定屏幕的滚动，可以使用lock修饰符；
当使用服务方式时，遮罩默认即为全屏，无需额外设置。
<template><el-buttontype="primary"@click="openFullScreen"v-loading.fullscreen.lock="fullscreenLoading">指令方式</el-button><el-buttontype="primary"@click="openFullScreenByService">服务方式</el-button></template>
<script>export default {data() {return {fullscreenLoading: false}},methods: {openFullScreen() {this.fullscreenLoading = true;setTimeout(() => {this.fullscreenLoading = false;}, 2000);},openFullScreenByService() {const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});setTimeout(() => {loading.close();}, 2000);}}}</script>
服务方式
全局引入
如果完整引入了Element，那么Vue.prototype上会有一个全局方法$loading，它的调用方式为：this.$loading(options)，会返回一个Loading实例。
单独引入
引入import { Loading } from 'element-ui';调用Loading.service(options);Loading.service也会返回一个Loading实例，可通过调用该实例的close方法来关闭它说明
以服务的方式调用的全屏Loading是单例的；若在前一个全屏Loading关闭前再次调用全屏Loading，并不会创建一个新的Loading实例，而是返回现有全屏Loading的实例，此时调用它们中任意一个的close方法都能关闭这个全屏Loading。：let loadingInstance1 = Loading.service({fullscreen: true });let loadingInstance2 = Loading.service({fullscreen: true });console.log(loadingInstance1 === loadingInstance2); // true
以服务的方式调用的Loading在调用close时需要异步关闭
let loadingInstance = Loading.service(options);this.$nextTick(() => {// 以服务的方式调用的 Loading 需要异步关闭loadingInstance.close();});
