实际使用:v-loading为true时,会出现白色遮屏效果。
贷款产品管理列表页中(loan.vue):v-loading绑定到整个div中。
a、默认初始requireLoading为false,点击下架confirm确认后,设为true;
b、updateProductInfo更新完数据库下架状态后,再恢复为false
<!--Loading 加载 加载数据时显示动效。
在表格等容器中加载数据时显示。
Element 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。
-->
<el-table
v-loading="loading"
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<script>
new Vue({
el: '#app',
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
loading: true
};
}
})
</script>
Loading 还可以以服务的方式调用。引入 Loading 服务:
import { Loading } from 'element-ui';
在需要调用时:
Loading.service(options);
其中 options
参数为 Loading 的配置项,具体见下表。LoadingService
会返回一个 Loading 实例,可通过调用该实例的 close
方法来关闭它:
let loadingInstance = Loading.service(options);
this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
loadingInstance.close();
});
如果完整引入了 Element,那么 Vue.prototype 上会有一个全局方法 $loading
,它的调用方式为:this.$loading(options)
,同样会返回一个 Loading 实例。