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

如何将表格中的状态数据转换为Tag标签显示

news 文章来源：https://blog.csdn.net/WuwuwuH_/article/details/131947459 2025/2/7 17:21:07

考虑到系统前端页面的美观程度，通常通过Tag标签来代替某条数据中的状态信息。仅通过一点操作，便能够使得页面美观程度得到较大提升，前后对比如下所示。代码基于Vue以及Element-ui组件实现。
修改前：
在这里插入图片描述
修改后：
在这里插入图片描述

修改前的原始代码如下所示：

<el-table :data="tableData" border stripe header-cell-class-name="headerBgColor"><el-table-column type="index" label="编号" width="100"></el-table-column><el-table-column prop="name" label="数据集名称" width="200"></el-table-column><el-table-column prop="time" label="上传时间" width="200"></el-table-column><el-table-column prop="status" label="可用状态" width="200"></el-table-column>
</el-table>

修改后的代码如下所示：

 <el-table :data="tableData" border stripe header-cell-class-name="headerBgColor"><el-table-column type="index" label="编号" width="100"></el-table-column><el-table-column prop="name" label="数据集名称" width="200"></el-table-column><el-table-column prop="time" label="上传时间" width="200"></el-table-column><el-table-column prop="status" label="可用状态" width="200"><template slot-scope="scope"><el-tag type="success" v-if="scope.row.status == 1">可用</el-tag><el-tag type="danger" v-if="scope.row.status == 0">不可用</el-tag></template></el-table-column>
</el-table>

相关文章：

如何将表格中的状态数据转换为Tag标签显示

考虑到系统前端页面的美观程度&#xff0c;通常通过Tag标签来代替某条数据中的状态信息。仅通过一点操作&#xff0c;便能够使得页面美观程度得到较大提升&#xff0c;前后对比如下所示。代码基于Vue以及Element-ui组件实现。 修改前&#xff1a; 修改后&#xff1a; 修改前…...

编程日记 2023/7/31 2:47:02

centos中修改防火墙端口开放配置

1、直接进入文件修改 vim /etc/sysconfig/iptables 2、添加需要开放的端口 &#xff08;1&#xff09;添加需要开放的单个端口 4001 -A INPUT -m state --state NEW -m tcp -p tcp --dport 4001 -j ACCEPT &#xff08;2&#xff09;添加需要开放的某个网段端口 4001:4020 …...

编程日记 2023/7/31 2:46:01

程序设计 算法基础

✅作者简介&#xff1a;人工智能专业本科在读&#xff0c;喜欢计算机与编程&#xff0c;写博客记录自己的学习历程。 &#x1f34e;个人主页&#xff1a;小嗷犬的个人主页 &#x1f34a;个人网站&#xff1a;小嗷犬的技术小站 &#x1f96d;个人信条&#xff1a;为天地立心&…...

编程日记 2023/7/31 2:45:00

【数据结构】之十分好用的“链表”赶紧学起来！(第一部分单向链表）

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …...

编程日记 2023/7/31 2:43:59

ubuntu开机自启动

ubuntu开机自启动 1、建一个test.sh脚本&#xff0c;并写入 #!/bin/sh gnome-terminal -x bash -c ‘cd /home/文件路径/;python3 main.py’ exit 0 2、:wq!保存 3、创建rc-local.service文件&#xff08;sudo vim /etc/systemd/system/rc-local.service&#xff09;&#xf…...

编程日记 2023/7/31 2:42:58

Git将其他分支合并至主分支

主要思想&#xff1a; 把分支代码合并到master&#xff0c;合给谁&#xff0c;就先切换到谁的分支 1. 当前分支是dev&#xff0c;开发完成后&#xff0c;需要合并到master分支 先把该提交的提交&#xff0c;需要push的push完成后&#xff0c;再切换分支。 否则也会告诉你要提交…...

编程日记 2023/7/31 2:41:57

Python+request+pytest 接口自动化测试框架入门（与unittest的比较）

1. Pythonrequestpytest 接口自动化测试框架入门 - 简书 pytest和unittest的比较&#xff1a; pytest是一个非常成熟的全功能的Python测试框架&#xff0c;主要有以下几个特点&#xff1a; 简单灵活&#xff0c;容易上手支持参数化能够支持简单的单元测试和复杂的功能测试&a…...

编程日记 2023/7/31 2:40:55

数据结构——复杂度

总有一天你要一个人&#xff0c;再暗夜中&#xff0c;向那座桥走过去 文章目录 一、算法的复杂度 考察形式范例 二、算法的时间复杂度 大O的渐进表示法 常见的复杂度对比 例题&#xff1a;消失的数字 题目的三种思路 1.排序遍历 2.减法 3.单身狗思想 三、空间复杂度…...

编程日记 2023/7/31 2:39:53

使用goldengate 迁移Oracle到postgresql

环境&#xff1a; --源端&#xff1a; IP&#xff1a;10.0.4.16 hostname&#xff1a;tencent Oracle数据库版本&#xff1a;12.2.0.1.0 ogg for oracle版本&#xff1a;19.1.0.0.4 SID&#xff1a;orcl --目标端&#xff1a; IP&#xff1a;10.0.4.16 hostname&#…...

编程日记 2023/7/31 2:38:53

ESP-C3入门20. CentOS开发环境及Jenkins流水线

一、准备环境 CentOS8已经正常安装Jenkins 二、升级 cmake cmake 升到 3.16以上。 cmake --version # 安装 g sudo yum install gcc-c export CXXg# 安装 CMake 的依赖项 sudo yum install -y openssl-devel# 下载 CMake 源码并进行编译安装 wget https://github.com/Kitwa…...

编程日记 2023/7/31 2:37:46

服务器被爬虫恶意攻击怎么办？

在有预算的情况可以采购第三方服务防火墙&#xff0c;没钱就使用开源的WAF进行防护。 # WAF防火墙的基本防护原理 WAF&#xff08;Web 应用防火墙&#xff09;可以使用多种技术来防止恶意爬虫攻击&#xff0c;例如&#xff1a; 1. 黑名单&#xff1a;WAF 可以使用黑名单技术来…...

编程日记 2023/7/31 2:36:44

JavaScript正则表达式之座机号/手机号验证校验规则

引用:https://www.bilibili.com/read/cv18300539/ 本文对利用正则表达式对手机号码进行了验证 支持格式&#xff1a; 座机 &#xff1a;xxx-xxxxxxxx、xxxxxxxxxxxx …座机区号的横杠可有可无 手机&#xff1a;xxxxxxxxxxx JavaScript&#xff1a; var: checkPhone (rule,…...

编程日记 2023/7/31 2:35:41

黑客学习手册（自学网络安全）

一、首先&#xff0c;什么是黑客&#xff1f; 黑客泛指IT技术主攻渗透窃取攻击技术的电脑高手&#xff0c;现阶段黑客所需要掌握的远远不止这些。 二、为什么要学习黑客技术&#xff1f; 其实&#xff0c;网络信息空间安全已经成为海陆空之外的第四大战场&#xff0c;除了国…...

编程日记 2023/7/31 2:34:35

获取非叶子节点的grad（retain_grad()、hook）【为了解决grad值是None的问题】

在调试过程中, 有时候我们需要对中间变量梯度进行监控, 以确保网络的有效性, 这个时候我们需要打印出非叶节点的梯度, 为了实现这个目的, 我们可以通过两种手段进行, 分别是: retain_grad()hook 不过我感觉“hook”比“retain_grad()”要麻烦.....&#xff0c;所以我感觉还是…...

编程日记 2023/7/31 2:33:34

JMeter(八)：响应断言详解

响应断言 ：对服务器的响应进行断言校验 （1）应用范围: main sample and sub sample, main sample only , sub-sample only , jmeter variable 关于应用范围，我们大多数勾选“main sample only” 就足够了，因为我们一个请求，实质上只有一个请求。但是当我们发一个请求时，…...

编程日记 2023/7/31 2:32:33

【网络编程】IO复用的应用一：非阻塞connect

在connect连接中&#xff0c;若socket以非阻塞的方式进行连接&#xff0c;则系统内设置的TCP三次握手超时时间为0&#xff0c;所以它不会等待TCP三次握手完成&#xff0c;直接返回&#xff0c;错误为EINPROGRESS。   所以&#xff0c;我们可以通过判断connect时返回的错误码是…...

编程日记 2023/7/31 2:31:31

Spring注解开发，bean的作用范围及生命周期、Spring注解开发依赖注入

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaweb 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 Spring注解开发 一、注解开发定义Bean二、纯注解开发Bean三…...

编程日记 2023/7/31 2:30:30

C#设计模式之---原型模式

原型模式&#xff08;Prototype Pattern&#xff09; 原型模式&#xff08;Prototype Pattern&#xff09; 是用原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些原型创建新的对象。原型模式是一种创建型设计模式。也就是用一个已经创建的实例作为原型&#xff0c;通过…...

编程日记 2023/7/31 2:29:29

STM32入门学习之外部中断

1.STM32的IO口可以作为外部中断输入口。本文通过按键按下作为外部中断的输入&#xff0c;点亮LED灯。在STM32的19个外部中断中&#xff0c;0-15为外部IO口的中断输入口。STM32的引脚分别对应着0-15的外部中断线。比如&#xff0c;外部中断线0对应着GPIOA.0-GPIOG.0&#xff0c;…...

编程日记 2023/7/31 2:28:25

Jenkins 配置maven和jdk

前提:服务器已经安装maven和jdk 一、在Jenkins中添加全局变量 系统管理–>系统配置–>全局属性–>环境变量 添加三个全局变量 JAVA_HOME、MAVEN_HOME、PATH 二、配置maven 系统管理–>全局工具配置–>maven–>新增 新增配置 三、配置JDK 在系统管…...

编程日记 2023/7/31 2:27:24

Leetcode ｜ Binary search | 22. 74. 162. 33. 34. 153.

22. Generate Parentheses 要意识到只要还有左括号&#xff0c;就可以放到path里。只要右括号数量小于左括号&#xff0c;也可以放进去。就是valid的组合。recurse两次 74. Search a 2D Matrix 看成sorted list就好。直接用m*n表示最后一位的index&#xff0c;并且每次只需要 …...

编程日记 2023/7/31 2:26:23

生命在于折腾——面试问题汇总

这里面的问题都是我参加面试时候遇到的问题&#xff0c;大家就这样看吧。 一、个人情况 1、自我介绍 2、为什么离开上一家公司 3、有没有参加过HVV 4、介绍一下上家公司的项目 5、小程序和公众号渗透测试做过么 6、实习工资多少 7、有挖过漏洞么 二、基础知识 1、信息收集的…...

编程日记 2023/7/31 2:25:22

＜Java＞Map＜String,Object＞中解析Object类型数据为数组格式

背景&#xff1a; 前端&#xff1a;入参为字符串和数组类型&#xff1b;通过json字符串传给后台&#xff0c; 后台&#xff1a;后台通过工具解析为Map<String&#xff0c;Object>&#xff0c;然后需要解析出Map里面的数组值做操作&#xff1b; 需求&#xff1a; 入参&…...

编程日记 2023/7/31 2:24:21

别再分库分表了，试试TiDB!

什么是NewSQL 传统SQL的问题 升级服务器硬件 数据分片 NoSQL 的问题 优点 缺点 NewSQL 特性 NewSQL 的主要特性 三种SQL的对比 TiDB怎么来的 TiDB社区版和企业版 TIDB核心特性 水平弹性扩展 分布式事务支持 金融级高可用 实时 HTAP 云原生的分布式数据库 高度兼…...

编程日记 2023/7/31 2:23:20

Java进阶之Dump文件初体验

视频地址&#xff1a;https://www.bilibili.com/video/BV1Ak4y137oh 学习文章&#xff1a;https://d9bp4nr5ye.feishu.cn/wiki/VQoAwlzrXiLFZekuLIyc1uK5nqc 最近线上频繁的内存告警&#xff0c;同事A通过分析dump文件解决了这个问题&#xff0c;我当然是不会放过这种学习的机…...

编程日记 2023/7/31 2:22:17

基于扩展(EKF)和无迹卡尔曼滤波(UKF)的电力系统动态状态估计(Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/7/31 2:21:16

曲线拟合(MATLAB拟合工具箱)位置前馈量计算(压力闭环控制应用)

利用PLC进行压力闭环控制的项目背景介绍请查看下面文章链接，这里不再赘述。 信捷PLC压力闭环控制应用(C语言完整PD、PID源代码)_RXXW_Dor的博客-CSDN博客闭环控制的系列文章，可以查看PID专栏的的系列文章，链接如下：张力控制之速度闭环(速度前馈量计算)_RXXW_Dor的博客-CSD…...

编程日记 2023/7/31 2:20:15

小程序使用echarts

参考文档&#xff1a;echarts官网、echarts-for-weixin 第一步引入组件库&#xff0c;可直接从echarts-for-weixin下载&#xff0c;也可以从echarts官网自定义生成&#xff0c;这里我们就不贴了组件库引入好后&#xff0c;就是页面引用啦&#xff0c;废话不多说&#xff0c;直…...

编程日记 2023/7/31 2:19:15

面向对象——封装

C面向对象的三大特性为&#xff1a;封装、继承、多态 C认为万事万物都皆为对象&#xff0c;对象上有其属性和行为 例如&#xff1a; ​ 人可以作为对象&#xff0c;属性有姓名、年龄、身高、体重…&#xff0c;行为有走、跑、跳、吃饭、唱歌… ​ 车也可以作为对象&#xf…...

编程日记 2023/7/31 2:18:13

【LeetCode】160.相交链表

题目 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返回结…...

编程日记 2023/7/31 2:17:12

专业建站流程/营销模式和营销策略

最近学习51单片机&#xff0c;使用Keil进行汇编编写代码时很多关键字没有高亮显示很不习惯&#xff0c;本身Keil鼠标选择字段操作就让人很无语&#xff0c;因此编辑ASM汇编文件都是用自己比较喜欢的EditPlus。EditPlus支持强大的、可自定义的语法高亮功能&#xff0c;可以创建自…...

编程日记 2025/2/7 11:40:18

wordpress 显示pdf/人工智能培训机构哪个好

上一期与大家探讨了做自媒体需要硬件与软件&#xff0c;今天接着和大家探讨做自媒体的心得二&#xff0c;做自媒体如何赚钱盈利&#xff0c;做自媒体该怎么样去做&#xff1f;从哪方面去做等问题。 怎么做自媒体&#xff0c;做自媒体如何赚钱盈利 一、是做图文自媒体 图文就是…...

编程日记 2025/2/7 10:54:14

网站繁体js/营销策划经典案例

题目&#xff1a; 我是超链接 题意&#xff1a; 将一个图划分成若干个部分&#xff0c;要求&#xff1a;1、可以互达的点在一个部分中 2、在一个部分中的点至少单向到达。要求分成部分最少 题解&#xff1a; 1A纪念 第一个要求就是强联通分量缩点&#xff0c;第二个要求就…...

编程日记 2025/2/7 10:45:08

电子商务网站开发技术和工具有哪些/独立站seo是什么意思

有客户反映&#xff0c;某个功能的前3页数据是一样的&#xff0c;后来检查发现确实如此。看看sql的查询结果&#xff0c;确实是前三页一样的&#xff0c;感觉sql也没什么问题&#xff0c;上网查询资料发现&#xff0c;是因为排序字段的问题。 SELECT* FROM(SELECTbb.*, ROWNUM …...

编程日记 2025/2/7 9:48:00

效果好企业营销型网站建设开发/seo怎么去优化

1.CallableCallable与Runnable类似&#xff0c;理解Callable可以从比较其与Runnable的区别开始&#xff1a;1.从使用上&#xff1a;实现的Callable的类需要实现call()方法&#xff0c;此方法有返回对象V&#xff1b;而Runnable的子类需要实现run()方法&#xff0c;但没有返回值…...

编程日记 2025/2/7 9:31:39

高校信息公开网站建设/东莞搜索优化

Java冠军Sebastian Daschner发表了一篇博客文章&#xff0c;提议明确阐明Jakarta EE和Eclipse MicroProfile之间的关系。 之前&#xff0c;他曾建议Eclipse MicroProfile成为Jakarta EE的孵化器 &#xff0c;但在这项新提议中&#xff0c;他接受了Eclipse MicroProfile如今比以…...

编程日记 2025/2/7 9:07:18