v-loading的使用--小优化（增强用户体验）

前言：需要获取后端接口数据到页面上进行显示，所以在请求发起至数据渲染页面的这段时间，为页面提供一个 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)
  	}
  }
}

使用总结：

1.在元素上绑定 v-loading="loading"

2.在data里面定义 loading: false,   // 默认为false不显示加载

3.在接口调取前开启Loading this.loading = true

4.接口调取成功关闭Loading this.loading = false