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份的简历之后...终于找到了...面试也挺简单的,,,第二天就去 ...
随机推荐
- 「考试」weight
正解是树剖. 首先Kru求最小生成树. 然后分别考虑树边和非树边的答案. 首先是非树边,非树边链接的两个点在MST上能够构成一条链. 这条链上最大的那条边-1就是这条边的答案. 为什么. 模拟Kru的 ...
- NOIP模拟 32
我在31反思中膜拜过了B哥 没想到这次又... 我给老姚家丢脸了...STO 首先T1暴力就写挂了... 贪图从$n^3$*$2^n$优化成$n^2$*$2^n$然后打错了 哗哗的扔分 而且正解都想不 ...
- python机器学习——感知器
最近在看机器学习相关的书籍,顺便把每天阅读的部分写出来和大家分享,共同学习探讨一起进步!作为机器学习的第一篇博客,我准备从感知器开始,之后会慢慢更新其他内容. 在实现感知器算法前,我们需要先了解一下神 ...
- js中的事件绑定的三种方式
1 直接在html标签中绑定 <button onclick = "show()"></button> 注意当你引用的js代码是包裹在window.onlo ...
- 使用Typescript重构axios(二十四)——防御XSRF攻击
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- CAP的学习和应用
性能优化真言:队列缓存分布式 异步调优堆配置 前言:用CAP有一段时间了,这里简单记录一下,这么好用的东西,小伙伴们赶紧上车吧 一.CAP使用场景? 平时工作中经常使用到MQ,如(kafka,rab ...
- 易初大数据 2019年11月8日 linux 王庆超
◆linux系统的特点: (1)完全免费. (2)高效.安全.稳定. (3)支持多种硬件平台. (4)友好的用户界面. (5)强大的网络功能. (6)支持多任务.多用户. ◆linux体系: 1.li ...
- egret inspect插件安装失败处理方法
egret inspect插件安装失败处理方法谷歌浏览器版本太高不兼容了 换个69就行了 然后点击加载已解压的扩展程序选择EgretInspector-v2.5.5这个文件夹 就安装成功了 重启下浏览 ...
- CentOS7 编码编译安装或卸载http2.4.25 一键脚本
待完善 CentOS 7测试 哈哈 #!/bin/bash #************************************************************** #Autho ...
- Jetpack Compse 实战 —— 全新的开发体验
公众号回复 Compose 获取安装包 项目地址: Wanandroid-Compose 经过前段时间的 Android Dev Summit ,相信你已经大概了解了 Jetpack Compose ...