element中el-table单行暂无数据和整体暂无数据的默认修改

element中el-table单行暂无数据和整体暂无数据的默认修改

最近在写element中的el-table表格时，遇到返回列表没有数据的情况

1.整个表格无数据

需要展示UI给的一张图片，奈何element默认的是暂无数据的文字，如下图

这个比较简单，网上顺便找就出来了在标签中加入

// An highlighted block<el-table><el-table-column></el-table-column><div slot="empty" class="empty"><img src="url(图片地址)"/>// 更改的文字</div></el-table>

效果如下图

2.表格中单个无数据

当我解决完第一个问题之后，新的问题又来了，果然当代程序员就是一天到晚写bug
当单个字段没有数据时，就会展示空或者为0

要求是前端展示‘’暂无班组‘’文字
修改过后，代码如下

<el-table-column align="center" prop="teamName" label="班组" show-overflow-tooltip><template slot-scope="{row}">{{ row.teamName || '暂无班组' }}</template>
</el-table-column>

或者是在获取数据时判断 ，该字段无数据时重新赋值

前端小白，还在学习中，有不对或还有值得优化的地方希望大家多多指正

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！