最近在写element中的el-table表格时,遇到返回列表没有数据的情况 1.整个表格无数据 需要展示UI给的一张图片,奈何element默认的是暂无数据的文字,如下图 这个比较简单,网上顺便找就出来了在标签中加入 // An highlighted block <el-table> <el-table-column></el-table-column> <div slot="empty" class="empt...
this.tableData = res.data.content; // 当请求后台,数据为空时,再让页面显示暂无数据 if(this.tableData.length === 0) { this.dataText ="暂无数据"; } } }); }
根据项目需要,获取后端接口返回数据请求过程中,table提示“数据加载中...”,请求成功后,若无数据提示“暂无数据”,有数据则展示数据。根据如上需求,需要自定义element-ui table表格暂无数据时的样式。1.只修改提示文字直接在<el-table>中直接添加empty-text="数据加载中..."属性即可。2.修改提示文字加图片如果需要...
vue table 没有数据的时候展示无数据 element-table 无数据的时候,把“暂无数据” 改成其他文字或图片 <el-table :data="tableData" > <el-table-columnlabel="序号"prop="amount"" min-width="80"align="center"><template#default="scope">{{scope.$index+1}}</template></el-table-column><el-...
el-table更换暂无数据样式 empty-text=" " javascript:void(0) <templateslot="empty">会员可以点击查看历史竞品查看<!--<img class="data-pic" src="#" alt="" />-->//这里还可以加上你想要的图片样式</template> 1. 2. 3. 4. //具体示例!!<el-tableid="table":data="tdata4"height="605"...
51CTO博客已为您找到关于vue el-table暂无数据的相关内容,包含IT学习相关文档代码介绍、相关教程视频课程,以及vue el-table暂无数据问答内容。更多vue el-table暂无数据相关解答可以来51CTO博客参与分享和学习,帮助广大IT技术人实现成长和进步。
(1)使用的table添加全局class='no-table-center',隐藏原有的暂无数据 (2)引用此文件中的CommonTableNodData方法 (3)在自己的页面中监听tableData(表格数据)的变化 watch:{ tableData : { handler(val) { CommonTableNodData(val,300); } } },
问题一、当无数据时,默认显示的“暂无数据”四个字偏到右侧,被遮挡。 原因:由于表格数据太多,下方出现横向滚动条,‘暂无数据’文本根据列平铺的总宽度进行居中,导致无数据时“暂无...
在上面的示例中,当 tableData 数组中的数据为空时,el-table 组件将不会显示,而是通过 v-else 指令显示 el-empty 组件,从而达到显示自定义空数据提示信息的效果。 三、自定义的空数据提示组件 在el-table empty 中,可以自定义空数据提示组件的样式和内容。可以使用 Element UI 中的 el-empty 组件,也可以基于业...