vue解决在调用后台接口获取数据前显示空画面问题

二咕耶

于 2021-07-07 11:35:44 发布

阅读量2.6k

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_46472771/article/details/118542894

版权

在Vue中，为了解决调用后台接口获取数据时可能出现的短暂空画面问题，可以设置一个接口调用后的标识。当数据未返回时，通过条件渲染el-empty组件，确保只有在接口返回空数据时才展示空状态效果。具体做法是在调用list查询接口后处理数据，并在el-empty组件上添加相应的显示条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查询功能，经常需要判断当前获取数据是否为空，为空时引用el-empty显示空状态效果，但常常接口数据会慢一步查询到数据，往往页面出现的效果是先显示空状态效果，等接口数据获取到赋值后再刷出数据页面效果，解决此类问题方法：定义一个接口调用后的标识

例如：

  emptyFlag: 0 // 0表示接口调用前，1表示接口调用后

具体在调用相关list查询接口做如下处理

 // 获取数据列表
    getList() {
   
      // loading缓存中
      this.loading.show()
      // 接口调用前标识
      this.emptyFlag = 0
      api.getList(this.map, this.page.pageCurrent, this.page.pageSize).then(res =>

最低0.47元/天解锁文章