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

news2024/10/7 0:28:09

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

 <el-table
    :data="tableData"
     stripe
    border
    empty-text="暂无数据"
 >

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

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

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

 完整代码:

<el-table
    :data="tableData"
    stripe
    border
    :class='{"is-empty":!tableData.length}'
>
    <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"
    stripe
    border
    :class='{"is-empty":!tableData.length}'
>
    <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.coloradmin.cn/o/841575.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

java.lang.UnsupportedClassVersionError TestCase

JavaFramework-JDK6.jar 放到JDK17运行没有问题 JavaFramework源码放到JDK17环境下编译出来的JavaFramework-JDK17.jar JavaFramework-JDK17.jar 放到JDK17运行没有问题 JavaFramework-JDK17.jar 放到JDK8运行没有问题&#xff0c;这个好像不对啊&#xff0c;可能之前编译设置…

day39反转字符串总结

反转字符串原理其实就是交换位置&#xff0c;以中间为分隔点&#xff1b; 基本套路&#xff1a;遍历前一般字符&#xff0c;互换位置&#xff1b; for循环模板 void reverseString(char* s, int sSize){char temp;for (int i 0, j sSize - 1; i < sSize/2; i, j--) {temp…

【无公网IP】本地电脑搭建个人博客网站(并发布公网访问 )和web服务器

【无公网IP】本地电脑搭建个人博客网站&#xff08;并发布公网访问 &#xff09;和web服务器 文章目录 【无公网IP】本地电脑搭建个人博客网站&#xff08;并发布公网访问 &#xff09;和web服务器前言1. 安装套件软件2. 创建网页运行环境 指定网页输出的端口号3. 让WordPress在…

【Rust】Rust学习第三章常见编程概念

包含第一、二章 文档&#xff1a;Rust 程序设计语言 - Rust 程序设计语言 简体中文版 (bootcss.com) 墙裂推荐这个文档 第一章入门 入门指南 - Rust 程序设计语言 简体中文版 第二章猜猜看游戏 猜猜看游戏教程 - Rust 程序设计语言 简体中文版 (bootcss.com) // 导入库 us…

Stable Diffusion 硬核生存指南:WebUI 中的 GFPGAN

本篇文章聊聊 Stable Diffusion WebUI 中的核心组件&#xff0c;强壮的人脸图像面部画面修复模型 GFPGAN 相关的事情。 写在前面 本篇文章的主角是开源项目 TencentARC/GFPGAN&#xff0c;和上一篇文章《Stable Diffusion 硬核生存指南&#xff1a;WebUI 中的 CodeFormer》提…

H263压缩码流如何分解为一个一个单元并查询到其宽高?

H263码流尺寸规格有限&#xff0c;只有以下几种&#xff1a; H263码流有四个分层&#xff1a; 1、图像层 2、块组 3、宏块 4、块 下面分别介绍&#xff1a; 具体介绍如下&#xff0c;5.1.3中红色框选部分就是压缩码流的宽高指示&#xff1a; 图像层 上面就是H263的图像层&am…

QT开发学习相关笔记

QT中配置文件读取 QT中使用的config文件为&#xff1a;xxx.ini文件,基本格式如下&#xff1a; 使用 QSetting&#xff08;QT自带类&#xff09;中的相关接口实现设置配置文件数据&#xff0c;或者读取数据。 读取配置文件路径设置如下&#xff0c;其中 iniPath为设置路径 ne…

word2003脚注问题

问题分析&#xff1a; 在题目上插入脚注的时候&#xff0c;脚注放在文件结尾&#xff0c;然后正文拆开了&#xff0c;不能续前节 解决办法&#xff1a; word2003中&#xff0c;工具->选项->兼容性

进程间通讯(IPC机制) 管道 信号量 共性内存 消息队列 详细图解

进程间通讯-IPC机制 常用命令管道有名管道读写编程有名管道示意图 无名管道 信号量信号量的概念信号量接口函数进程 a 和进程 b 模拟访问打印机 用信号量互斥画图分析代码实现测试结果显示和操作 共享内存 信号量 消息队列 的命令 共享内存共享内存定义共享内存函数接口实例编程…

docker镜像push到仓库

镜像可以很方便直接 push 到 docker 的公共仓库或阿里云仓库 一、Dockerpush指定仓库是什么&#xff1f; Dockerpush是Docker的一个命令&#xff0c;用于将本地的Docker镜像推送到Docker官方公共仓库或用户私人仓库。而指定仓库则是将这个Docker镜像推送到指定的仓库中。 通过D…

【独立后台】快递小程序便宜寄快递系统小程序 对接易达

快递代发项目简介&#xff1a; 顾名思义就是帮发快递。原本产业链是客户-快递之间的联系&#xff0c;现在变成了客户-我们-快递&#xff0c;简单来说就是我们把客户聚集到一起团购到了更优惠的价格。很简单就是赚一个差价&#xff0c; 单子多就能和各个快递合作的平台&#x…

C++ 类型兼容规则

类型兼容规则是指在需要基类对象的任何地方&#xff0c;都可以使用公有派生类的对象来替代。 通过公有继承&#xff0c;派生类得到了基类中除构造函数和析构函数之外的所有成员。这样&#xff0c;公有派生类实际就具备了基类的所有功能&#xff0c;凡是基类能解决的问题&#x…

QA | 关于手持式频谱仪,您想了解的那些技术问题(二)

Q1&#xff1a;手持式频谱仪的灵敏度多高&#xff1f;底噪多少&#xff1f; 0.01-3GHz手持频谱仪的底噪/灵敏度为-128dBm RBW10kHz&#xff08;即归一化到Hz为-168dBm/Hz&#xff09;&#xff1b;2-8GHz手持频谱仪的底噪/灵敏度为-119dBm RBW30kHz&#xff08;即归一化到Hz为…

Javascript 数据结构[入门]

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于海外某世界知名高校就读计算机相关专业。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。…

JVM之类加载与字节码(一)

1.类文件结构 一个简单的HelloWorld.Java package cn.itcast.jvm.t5; // HelloWorld 示例 public class HelloWorld { public static void main(String[] args) { System.out.println("hello world"); } }编译为 HelloWorld.class 后的样子如下所示&#xff1a; […

最小二乘问题和非线性优化

最小二乘问题和非线性优化 0.引言1.最小二乘问题2.迭代下降法3.最速下降法4.牛顿法5.阻尼法6.高斯牛顿(GN)法7.莱文贝格马夸特(LM)法8.鲁棒核函数 0.引言 转载自此处&#xff0c;修正了一点小错误。 1.最小二乘问题 在求解 SLAM 中的最优状态估计问题时&#xff0c;我们一般…

ModaHub魔搭社区:大模型落地需要“记忆力”,这家公司想为向量数据库Milvus Cloud正名

现实生活中若两人进行对话,大致需要三步流程:一方首先抛出话题作引子;另一方会先调动记忆判断自己是否了解这个话题,然后再分析给出应该做出何种回答。如此循环往复直到互动结束,而此次对话又会作为一种新的“记忆”被双方吸收。 为让计算机完成这样的互动过程,并持续…

【云原生】Docker-Compose全方面学习

目录 1.compose简介 Compose V2 2.compose安装与下载 二进制包 PIP 安装 bash 补全命令 卸载 3.docker compose管理命令 命令对象与格式 命令选项 命令使用说明 1.compose简介 Compose 是用于定义和运行多容器 Docker 应用程序的工具。通过 Compose&#xff0c;您可…

设计模式之策略模式(Strategy)

一、概述 定义一系列的算法&#xff0c;把它们一个个封装起来,并且使它们可相互替换。本模式使得算法可独立于使用它的类而变化。 二、适用性 1.许多相关的类仅仅是行为有异。“策略”提供了一种用多个行为中的一个行为来配置一个类的方法。 2.需要使用一个算法的不同变体。…

Crowd-Robot Interaction 论文阅读

论文信息 题目&#xff1a;Crowd-Robot Interaction:Crowd-aware Robot Navigation with Attention-based Deep Reinforcement Learning 作者&#xff1a;Changan Chen, Y uejiang Liu 代码地址&#xff1a;https://github.com/vita-epfl/CrowdNav 来源&#xff1a;arXiv 时间…