iview 表格暂无数据展示缺省页

项目需求为：进入页面，初始加载数据（初始数据为空）时不展示缺省页，等调用接口，获取不到数据以后再展示缺省页图片。

<Tableborder:columns="column" :data="data" :no-data-text=" data.length == 0 && tableNoData ? `<img src=${noDataImg} style='width:288px;' /><p style='color:#999999;margin-bottom:16px;'>暂无数据</p>` : '' " max-height="231"
>
</Table>

思路：根据官网的api，在原有表格的基础上添加一个：no-data-text属性（数据为空时显示的提示内容），用三元表达式控制有无数据时的展示内容。

tableNoData为自定义的一个变量，值为布尔类型，只有通过调用接口获取数据，才能改变它的值。

data{return{tableNoData: false, //班级表格是否展示缺省页}
}methods:{getData(){apiFunc({param:value}).then(res=>{if ( res.data.get_list.length == 0 ) {  //没数据this.tableNoData = true;} else {this.tableNoData = false;<!--表格数据赋值代码段省略-->   }})}
}

iview 表格暂无数据展示缺省页相关推荐

el-table loading 显示暂无数据查询时显示数据正在加载中
<el-table v-loading="loadingShow" element-loading-text="数据正在加载中..."此处省略好几行> ...
element-ui的el-table表格中给暂无数据加背景图
css样式: .el-table__empty-text { display: block; width: 500px; height: 385px; padding-top: 300px; back ...
el table怎么获取最后一行_element中el-table单行暂无数据和整体暂无数据的默认修改...
element中el-table单行暂无数据和整体暂无数据的默认修改最近在写element中的el-table表格时,遇到返回列表没有数据的情况 1.整个表格无数据需要展示UI给的一张图片,奈何e ...
在iview表格插入title提示
在iview表格插入title提示实现效果:当表格数据内容较多的时候,文本不换行,超出部分显示为省略号的时候,鼠标移动到某个表格内容的时候,展示出全部内容,像title属性一样. 实现方法: 方法一 ...
ElementUi el-table 美化暂无数据状态
前言:当表格数据过长的时候,会出现横向滚动条,这个时候暂无数据就需要拉动滚动条到中间才能看到,导致页面及其不美观,所有,请看下方正常的空值状态如下经过修改后解决方法如下 <template ...
echarts 显示暂无数据的具体方法
在 echarts 渲染过程中,当没有数据的时候,页面像没有完成的项目一般,为了更好的用户体验,需要显示暂无数据,这里整理了三种实现方案: (1)通过判断是否有渲染需要的图表数据,给 DOM 插入文字 ...
R语言使用ggpubr包的ggarrange函数组合多张结论图：使用ggpubr包将图像、文本、表格组合在一起展示
R语言使用ggpubr包的ggarrange函数组合多张结论图:使用ggpubr包将图像.文本.表格组合在一起展示目录 R语言使用ggpubr包的ggarrange
iview表格表头上添加icon图标
需求描述: 如图,在表格表头处添加icon图标,并且鼠标悬浮时有提示语. 解决方案: 使用iview表格中自带的 renderHeader 函数,其用法和 render 类似, 代码: <tem ...
vue 更改 element-ui 中 el-table 默认的暂无数据样式
element-ui 官方提供了 table 组件暂无数据的样式信息,如果我们想要自定义暂无数据的样式信息时,那我们又该如何定义呢? 一.更改文字提示官方提供 API: empty-text 空数据 ...

iview 表格暂无数据展示缺省页

iview 表格暂无数据展示缺省页相关推荐

最新文章

热门文章

iview 表格 暂无数据 展示缺省页

iview 表格 暂无数据 展示缺省页相关推荐

最新文章

热门文章

iview 表格暂无数据展示缺省页

iview 表格暂无数据展示缺省页相关推荐