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>
或者是在获取数据时判断 ,该字段无数据时重新赋值
前端小白,还在学习中,有不对或还有值得优化的地方希望大家多多指正