在表格等容器中加载数据时显示。

    Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令，只需要绑定Boolean即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加body修饰符，可以使遮罩插入至 DOM 中的 body 上。

    可自定义加载文案、图标和背景色。

    在绑定了v-loading指令的元素上添加element-loading-text属性，其值会被渲染为加载文案，并显示在加载图标的下方。类似地，element-loading-spinner和element-loading-background属性分别用来设定图标类名和背景色值。

    1. <template>
    2.   <el-table
    3.     v-loading="loading"
    4.     element-loading-text="拼命加载中"
    5.     element-loading-spinner="el-icon-loading"
    6.     element-loading-background="rgba(0, 0, 0, 0.8)"
    7.     :data="tableData"
    8.     style="width: 100%">
    9.     <el-table-column
    10.       prop="date"
    11.       label="日期"
    12.       width="180">
    13.     </el-table-column>
    14.       prop="name"
    15.       label="姓名"
    16.       width="180">
    18.     <el-table-column
    19.       prop="address"
    20.       label="地址">
    21.     </el-table-column>
    22.   </el-table>
    23. </template>
    25. <script>
    26.   export default {
    27.     data() {
    28.       return {
    29.         tableData: [{
    30.           date: '2016-05-03',
    31.           name: '王小虎',
    32.         }, {
    33.           date: '2016-05-02',
    34.           name: '王小虎',
    35.           address: '上海市普陀区金沙江路 1518 弄'
    36.         }, {
    37.           date: '2016-05-04',
    38.           name: '王小虎',
    39.           address: '上海市普陀区金沙江路 1518 弄'
    41.         loading: true
    42.       };
    43.     }
    44.   };
    45. </script>

    页面数据加载时显示。

    Loading 加载 - 图3

    当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。

    1. import { Loading } from 'element-ui';

    在需要调用时：

    其中 options 参数为 Loading 的配置项，具体见下表。LoadingService 会返回一个 Loading 实例，可通过调用该实例的 close 方法来关闭它：

    1. let loadingInstance = Loading.service(options);
    2. this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
    3.   loadingInstance.close();

    需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：

    此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。