前言：需要获取后端接口数据到页面上进行显示，所以在请求发起至数据渲染页面的这段时间，为页面提供一个 loading 加载是极为必要的。
1.区域加载
    以 table 表格为例，使用 v-loading，为其绑定一个布尔值（true/false），代码如下：

<template>
  <div id="index">
  <!-- 表格 -->
    <el-table :data="tableData" v-loading="loading">
      <el-table-column type="selection"></el-table-column>
      <el-table-column sortable prop="name" label="姓名"></el-table-column>
      <el-table-column sortable prop="number" label="代号"></el-table-column>
      <el-table-column sortable prop="age" label="年龄"></el-table-column>
      <el-table-column sortable prop="sex" label="性别">
        <template slot-scope="scope">
          <el-tag :type="scope.row.sex === '1' ? 'primary' : 'success'" disable-transitions>
            {{scope.row.sex==='1'? '男': '女'}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
   </div>
</template>

<script>
export default {
  name: "index",
  data () {
    return {
      loading: false,   // 默认为false不显示加载
      tableData:[]   // 数据
    }
  },
  created() {
    // 调用获取数据方法
    this.getdata()
  },
  methods: {
  	// 获取数据方法
  	getdata() {
  	  this.loading = true
      // 模拟获取接口数据
      setTimeout(() => {
      	this.tableData = [  // 模拟数据
        {
          name: 'wangfu',
          number: '001',
          age: '24',
          sex: '1'
        },
        {
          name: 'wangfu',
          number: '001',
          age: '24',
          sex: '1'
        }
      	],
        this.loading = false
      }, 1000)
  	}
  }
}

2.自定义加载
    添加 element-loading-text 属性为加载文字显示在加载图标的下方， element-loading-spinner 属性为设定图标的类名，element-loading-background 属性为背景色值，代码如下：

<el-table :data="tableData" 
	v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"></el-table>
`
3.整页加载
&nbsp;&nbsp;&nbsp;&nbsp;使用指令方式来实现整页加载时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符，代码如下：
```javascript
v-loading.fullscreen.lock="loading"