在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数据为:

Logo

前往低代码交流专区

更多推荐