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(图片地址)"/>
 		// <span>更改的文字</span>
   	</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>

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

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