宁波专业的网站搭建公司/郑州网站建设价格

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