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

  解决办法:

  

  <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. 一个九位数-python

    有一个9位数由1~9的9个数字组成, 每个数字只能出现一次:其第一位能被1整除, 前两位能被2整除, 前三位能被3整除...依次类推,前9位能被9整除.所有的9位数中,只有一个数字满足这些条件,请你输 ...

  2. Python基础语法,他其实很贵!

    # -*- coding:utf-8 -*- # @Time :2019/7/19 11:26# @Author :ITester# @Email :1036881587@qq.com# @File ...

  3. 还看不懂同事的代码?Lambda 表达式、函数接口了解一下

    当前时间:2019年 11月 11日,距离 JDK 14 发布时间(2020年3月17日)还有多少天? // 距离JDK 14 发布还有多少天? LocalDate jdk14 = LocalDate ...

  4. JDK下载安装配置教程(详细)

    JDK下载安装配置教程(详细) 版权声明:本文为原创文章,转载请附上原文出处链接和本声明.https://www.cnblogs.com/mxxbc/p/11844885.html 因为最近需要在Wi ...

  5. 使用VSCode调试Egret项目中的ts代码

    发布一次Android项目后,会在代码里,生成对应的.map文件.这样就可以在编辑器里或是Chrome里面对相应的TS文件进行断点调试了. 实际只要在tsconfig.json里面配置一下," ...

  6. 【并发编程】Java中的原子操作

    什么是原子操作 原子操作是指一个或者多个不可再分割的操作.这些操作的执行顺序不能被打乱,这些步骤也不可以被切割而只执行其中的一部分(不可中断性).举个列子: //就是一个原子操作 int i = 1; ...

  7. 软件测试的原则,软件测试计划:5W1H

    1.测试应该尽早介入.        2.所有的测试都应追溯到用户需求.        3.程序员应该避免检查自己的程序.除了单元测试.因为程序员对于自己的作品,思维具有局限性.无法保证测试质量.交给 ...

  8. SQL中Truncate的用法

    SQL中Truncate的用法转自:http://www.studyofnet.com/news/555.html本文导读:删除表中的数据的方法有delete,truncate, 其中TRUNCATE ...

  9. veu npm run dev指定host

    通常,我们可以在vue项目中的config/index.js指定host,,如下(解host的注释) 但是,在接手的目前项目中,解注释host后,npm run dev并有变为 http://192. ...

  10. Rust 入门 (一)

    Rust 语言的介绍.特性什么的都不说了,如有需要,请自行了解.这里我们直接进去正题. 一.开发环境 mac或linux系统,在命令行安装 curl https://sh.rustup.rs -sSf ...