Vue computed中set和get的简单使用 -- 表格的loading

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

扫描二维码关注公众号，回复： 13349995 查看本文章