技术标签: Vue element-ui
项目中的表头和内容都是动态请求生成的,延时更久就会出现先闪一下(比闪一下更久)暂无数据,再显示正常界面的问题,用户体验会比较差。
解决办法:动态定义tablelist为空时候展示的内容,没有请求到数据之前显示为空,请求到数据但是数据本身就是空的再显示"暂无数据"
empty-text为table组件空数据时显示的文本内容,也可以通过slot="empty"设置
Table组件:
<!--增加内容-->
<template slot="empty">
<p>{{tableText}}</p>
</template>
<el-table-column v-if="showSelect" type="selection" width="55"></el-table-column>
data中初始定义tableText为空:
data() {
return {
tableText: "" //进去页面先让字样为空
};
},
发请求之后,若得到的tablelist真为懂再显示“暂无数据”:
getList() {
this.tableText = " "; //先置空
getApportRecpList({params).then((res:any) => {
this.headGroups = headGroupsTemp;
this.list = res.data.dataList;
if (this.list.length === 0) {
this.tableText = "暂无数据";
}
});
}
版权声明:本文为a1059526327原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a1059526327/article/details/110374558