Vue computed中set和get的简单使用 -- 表格的loading
在Vue的计算属性computed中,可以定义get和set,话不多说上例子:使用iview admin做项目,目前做到表格方面,那么问题来了,表格数据使用异步请求,如何在数据到之前显示loading呢:<template><div><Table :loading="loading" :data="tableData1" :columns="ta...
·
在Vue的计算属性computed中,可以定义get和set,话不多说上例子:
使用iview admin做项目,目前做到表格方面,那么问题来了,表格数据使用异步请求,如何在数据到之前显示loading呢:
<template>
<div>
<Table :loading="loading" :data="tableData1" :columns="tableColumns1" stripe></Table>
</div>
</template>
iview的table自带了:loading状态,我们可以通过计算属性来切换loading的值,true为加载中,false为加载完毕:
computed: {
loading: {
get: function() {
if(this.dataArr.length != 0){
return false;
}else{
return true
}
},
set: function(newValue) {
return newValue;
}
},
dataArr() {
return this.$store.getters.getDataArr;
}
},
初始get根据当前请求数据定,如果请求到了为false,未请求到为true,一旦dataArr发生改变,即请求完成数据赋值则触发set将新的状态赋值给loading即可达到效果:
可以看到loading为true(左下角),此时dataArr为:
过几毫秒之后:
这个时候代表数据已经请求到,此时loading变为false,dataArr数据为:
更多推荐
已为社区贡献2条内容
所有评论(0)