element table 先显示暂无数据 之后再加载数据 问题
项目中的表格请求数据时,进去页面,先出现 ''暂无数据'' 字样闪现一下之后在进行加载数据,用户体验十分不好
解决办法:
<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 先显示暂无数据 之后再加载数据 问题的更多相关文章
- 监听table滚动事件,滚动到底部时加载数据
mounted() { this.$refs.scrollTable.addEventListener( 'scroll',(event) => { this.getDistance(event ...
- [每日一题] OCP1z0-047 :2013-08-17 EXTERNAL TABLE――加载数据 ............................56
正确答案:C 一.对答案解释: A. TYPE:有两个选可供选择: 1. ORACLE_LOADER:传统方式,与SQLLDR一样,参数从多,应用较多. 2. ...
- element el-tree、el-table组件加载数据前闪现 暂无数据 清除
相信很多人在使用element el-tree.el-table组件加载数据前会显示一个" 暂无数据 ",体验很不友好,有没有办法处理不显示呢?答案是:有的.废话不多说直接上代码 ...
- Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题
问题如题:Fullcalendar改版后发布到IIS或者tomcat里面前端加载数据不显示的问题 解决办法:通过火狐浏览器工具发现是时间格式不对的原因,需要将时间格式修改为:yyyy-MM--DD ...
- XE7 & FMX 那些年我们一起上过的控件:ListView 之 (3) 加载数据时如何显示自定义样式
本文介绍一下ListView下如何加载数据.及使用进度条反馈当前进度给用户. 注意: 原创作品,请尊重作者劳动成果,转载请注明出处!!!原文永久固定地址:http://www.cnblogs.com/ ...
- 当vue 页面加载数据时显示 加载loading
参考:https://www.jianshu.com/p/104bbb01b222 Vue 页面加载数据之前增加 `loading` 动画 创建组件 1.新建 .vue 文件: src -> c ...
- 自设table表格,获取内容,并经弹出框的url传参,获取结果显示在弹出框,并加载合计
table表格,选择框 form id="editForm1"> <table class="table_form"> <td > ...
- 【bug】table重新加载数据,页面滚动条下沉到底部,记录scrollTop后将其恢复scrollTop出现闪烁
1.table数据请求前记录scrollTop $scope.scrollPos = document.documentElement.scrollTop; 2.html中添加指令repeat-fin ...
- easy-ui 小白进阶史(一):加载数据,easy-ui显示
作为一个没上过大学,没经过正规培训的96年的小白来说,找工作就没报特别大的希望,大不了找不到在回炉重造,继续学... 终于在海投了200份的简历之后...终于找到了...面试也挺简单的,,,第二天就去 ...
随机推荐
- python中str.isdigit()用法
str.isdigit()中只包含数字返回true,包含其它则返回false
- numpy.array 合并和分割
# 导包 import numpy as np numpy.array 的合并 .concatenate() 一维数组 x = np.array([1, 2, 3]) # array([1, 2, 3 ...
- 那些Java架构师必知必会的技术
Java基础 Java 7 和 Java 8 中的 HashMap原理解析 Java7 和 Java8 中的 ConcurrentHashMap 原理解析 Java中自定义注解 Java函数式编程和l ...
- 推荐一款Diffy:Twitter的开源自动化测试工具
1. Diffy是什么 Diffy是一个开源的自动化测试工具,是一种Diff测试技术.它能够自动检测基于Apache Thrift或者基于HTTP的服务.通过同时运行新/老代码,对比运行结果,发现潜在 ...
- 一张图牢记vim常用命令
1.示例(前提要切到命令状态) ^ 光标移动到行首 $ 光标移动到行尾 set nu 显示行号 :%s/foo/bar/g 会在全局范围(%)查找foo并替换为bar,所有出现都会被替换(g) 参 ...
- ATM功能实现项目
一.模拟实现一个ATM + 购物商城程序 1.额度 15000或自定义2.实现购物商城,买东西加入 购物车,调用信用卡接口结账3.可以提现,手续费5%4.支持多账户登录5.支持账户间转账6.记录每月日 ...
- 深入理解计算机系统 第三章 程序的机器级表示 part2
这周由于时间和精力有限,只读一小节:3.4.4 压入和弹出栈数据 栈是一种特殊的数据结构,遵循“后进先出”的原则,可以用数组实现,总是从数组的一端插入和删除元素,这一端被称为栈顶. 栈有两个常用指令 ...
- 一文带你深入了解 Redis 的持久化方式及其原理
Redis 提供了两种持久化方式,一种是基于快照形式的 RDB,另一种是基于日志形式的 AOF,每种方式都有自己的优缺点,本文将介绍 Redis 这两种持久化方式,希望阅读本文后你对 Redis 的这 ...
- PHP 向数组头部插入数据
PHP 向数组头部插入数据 函数: array_unshift() 示例: $s = array('a' => 0, 'b' => 3); array_unshift($s, '5'); ...
- Java描述设计模式(21):状态模式
本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.场景描述 变色龙是爬行动物,是非常奇特的动物,它有适于树栖生活的种种特征和行为,身体也会随着环境的变化而变化出适应环境的颜色 ...