当前位置: 首页 > news >正文

element-ui表格数据为空,图片占位提示

 当表格的绑定数据为空时常需要显示暂无数据等字样,这时候就用到了empty-text

 <el-table:data="tableData"stripeborderempty-text="暂无数据">

但,当数据为空,想用图片展示呢,如下图 

 方法一:可在表格底部列在加入自定义图片

    <div slot="empty" class="empty"><img src="../../assets/images/empty.jpg"/><span class="txt">暂无查不到记录</span></div>

 完整代码:

<el-table:data="tableData"stripeborder
><el-table-column label="序号" width="70" align="left" prop="NO"></el-table-column><el-table-column label="借款金额" width="130" prop="price"><template #default="scope"><span class="orange">¥35,666,999,.00</span></template></el-table-column><el-table-column label="操作" width="160" fixed="right" align="center"><template #default="scope"><el-button size="small" plain type="info" @click="openAddOrEditDialog(scope.row)">还款</el-button><el-button size="small" plain type="success" @click="delData(scope.row.demoId)">订单详情</el-button></template></el-table-column><div slot="empty" class="empty"><img src="../../assets/images/empty.jpg"/><span class="txt">暂无查不到记录</span></div>
</el-table>

方法二:使用element的Empty空状态组件,无数据图片占位提示

<div slot="empty" class="empty"><el-empty description="暂时查不到记录" />
</div>
<el-table:data="tableData"stripeborder
><el-table-column label="序号" width="70" align="left" prop="NO"></el-table-column><el-table-column label="借款金额" width="130" prop="price"><template #default="scope"><span class="orange">¥35,666,999,.00</span></template></el-table-column><el-table-column label="操作" width="160" fixed="right" align="center"><template #default="scope"><el-button size="small" plain type="info" @click="openAddOrEditDialog(scope.row)">还款</el-button><el-button size="small" plain type="success" @click="delData(scope.row.demoId)">订单详情</el-button></template></el-table-column><div slot="empty" class="empty"><el-empty description="暂时查不到记录" /></div>
</el-table>

http://www.lryc.cn/news/121598.html

相关文章:

  • C++ STL vector 模拟实现
  • 51单片机学习--红外遥控(外部中断)
  • 后端开发10.规格模块
  • 腾讯出了一个新聊天软件M8
  • C++ QT(一)
  • 微信小程序时钟
  • HttpRunner自动化工具之设置代理和请求证书验证
  • opsForHash() 与 opsForValue 请问有什么区别?
  • 具有吸引子的非线性系统(MatlabSimulink实现)
  • Linux一些常见的命令
  • 正则表达式的基本知识
  • 如何⽤webpack 来优化前端性能
  • 人机交互中的混合多重反馈
  • CSS:服务器字体 与 响应式布局(用法 + 例子 + 效果)
  • 24届近3年上海电力大学自动化考研院校分析
  • PostgreSQL查询慢sql原因和优化方案
  • Leetcode 21. 合并两个有序链表
  • [tool] Ubuntu 设置开机启动python脚本
  • 「何」到底该读「なん」还是「なに」?柯桥学日语
  • github - 创建组织-Team
  • 【Transformer】自注意力机制Self-Attention | 各种网络归一化Normalization
  • 沁恒ch32V208处理器开发(四)串口通信
  • 【BASH】回顾与知识点梳理(十八)
  • linux 目录操作命令
  • React Dva项目小优化之redux-action
  • Kotlin反射访问androidx.collection.LruCache类私有变量
  • 高级进阶多线程——多任务处理、线程状态(生命周期)、三种创建多线程的方式
  • 【 K8S 】 Pod 进阶
  • 众和转债,宏微转债,阳谷转债上市价格预测
  • MySQL~事务的四大特性和隔离级别