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