项目中的表格请求数据时,进去页面,先出现 ''暂无数据'' 字样闪现一下之后在进行加载数据,用户体验十分不好

  解决办法:

  

  <template>
<el-table :data="tableData" style="width: 100%">
<template slot="empty">
<p>{{dataText}}</p>
</template>
<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>
</template> data() {
return {
tableData: [],
dataText: "" //进去页面先让字样为空
};
}, //请求数据
goodsList() {
//先将变量清空
this.dataText = "";
this.$request(
this.$config.baseApi + "/user/address/inde", "get" ).then(res => {
if (res.code === 200) {
this.tableData = res.data.content;
// 当请求后台,数据为空时,再让页面显示暂无数据
if (this.tableData.length === 0) {
this.dataText = "暂无数据";
}
}
});
}

  

element table 先显示暂无数据 之后再加载数据 问题的更多相关文章

  1. 监听table滚动事件,滚动到底部时加载数据

    mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...

  2. [每日一题] OCP1z0-047 :2013-08-17 EXTERNAL TABLE――加载数据 ............................56

    正确答案:C 一.对答案解释: A.       TYPE:有两个选可供选择: 1.        ORACLE_LOADER:传统方式,与SQLLDR一样,参数从多,应用较多. 2.         ...

  3. element el-tree、el-table组件加载数据前闪现 暂无数据 清除

    相信很多人在使用element  el-tree.el-table组件加载数据前会显示一个" 暂无数据 ",体验很不友好,有没有办法处理不显示呢?答案是:有的.废话不多说直接上代码 ...

  4. Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题

    问题如题:Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题 解决办法:通过火狐浏览器工具发现是时间格式不对的原因,需要将时间格式修改为:yyyy-MM--DD   ...

  5. XE7 & FMX 那些年我们一起上过的控件:ListView 之 (3) 加载数据时如何显示自定义样式

    本文介绍一下ListView下如何加载数据.及使用进度条反馈当前进度给用户. 注意: 原创作品,请尊重作者劳动成果,转载请注明出处!!!原文永久固定地址:http://www.cnblogs.com/ ...

  6. 当vue 页面加载数据时显示 加载loading

    参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> c ...

  7. 自设table表格,获取内容,并经弹出框的url传参,获取结果显示在弹出框,并加载合计

    table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...

  8. 【bug】table重新加载数据,页面滚动条下沉到底部,记录scrollTop后将其恢复scrollTop出现闪烁

    1.table数据请求前记录scrollTop $scope.scrollPos = document.documentElement.scrollTop; 2.html中添加指令repeat-fin ...

  9. easy-ui 小白进阶史(一):加载数据,easy-ui显示

    作为一个没上过大学,没经过正规培训的96年的小白来说,找工作就没报特别大的希望,大不了找不到在回炉重造,继续学... 终于在海投了200份的简历之后...终于找到了...面试也挺简单的,,,第二天就去 ...

随机推荐

  1. 用selenium实现打码平台

    注:本文以  人人网登陆 为例 import time from selenium import webdriver # 准备一个名为yudama的py文件 from yudama import in ...

  2. [考试反思]1023csp-s模拟测试84:精妙

    一套很奇怪的题.单调性+神仙dp/搜索+随机化. 但是说实在的,思路都很不错. 考场上显然乱搞没什么好说的. 虽说T2剪枝打错变量名掉了20分... T1:Smooth 暴力各有不同,最暴力的想法就是 ...

  3. js简单函数(动态交互)

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  4. P5304旅行者(比bk201还要流氓的解法)

    题目如上. 暴力碾标算,n^2过百万!! 作为一道黑题它确实有点点水(如果是畜生解法的话) 就是找出两两点之间的最短路的最小值. 本来是很高深的一题,要跑两遍最短路啊,然后染色啊,再拓展什么的,但是! ...

  5. Android 开发中是否应该使用枚举?

    本文由咕咚发布在个人博客,转载请注明出处. 本文永久地址:https://gudong.name/2019/11/04/use-enum-or-not.html 在 Android 官方文档推出性能优 ...

  6. SpringBoot Web篇笔记(一)

    摘要 文章是根据江南一点雨(松哥)的视频进行总结 江南一点雨博客 全局异常处理 通常情况下,我们都需要对自己定义的异常进行相应的处理.捕获指定的异常方式如下: @ControllerAdvice pu ...

  7. 线性模型之逻辑回归(LR)(原理、公式推导、模型对比、常见面试点)

    参考资料(要是对于本文的理解不够透彻,必须将以下博客认知阅读,方可全面了解LR): (1).https://zhuanlan.zhihu.com/p/74874291 (2).逻辑回归与交叉熵 (3) ...

  8. php windows与linux下的路径区别

    php windows与linux下的路径区别windows用的是"\",linux用的是"/"这一点要特别清楚,, ps:在PHP windows也可以用/表 ...

  9. 每天一道算法题-leetcode136-只出现一次的数字

    前言 打卡第一天 2019.10.26日打卡 算法,即解决问题的方法.同一个问题,使用不同的算法,虽然得到的结果相同,但是耗费的时间和资源是不同的.这就需要我们学习算法,找出哪个算法更好. 大家都知道 ...

  10. 重写equals方法,也应该重写hashcode方法,反之亦然

    yls 2019年11月07日 一方面 hashcode原则:两个对象equals相等,hashcode值一定相等 默认的hashcode是Object类通过对象的内存地址得到的 若重写equals而 ...