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

考虑到系统前端页面的美观程度,通常通过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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/8868.shtml

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

相关文章

QT信号与槽及常见问题

Qt的信号与槽&#xff08;Signals and Slots&#xff09;: 是一种用于对象间通信的机制&#xff0c;它是Qt框架的核心特性之一。通过信号与槽&#xff0c;一个对象可以在特定事件发生时发射信号&#xff0c;而其他对象则可以在接收到信号时执行对应的槽函数。这种机制实现了对…

1.Flink概述

1.1 技术架构 应用框架层: 在API层之上构建的满足特定应用场景的计算框架&#xff0c;总体上分为流计算和批处理两类应用框架。API 层&#xff1a; Flink对外提供能力的接口 &#xff0c;实现了面向流计算的DataStream API和面向批处理的DataSet API。运行时层&#xff1a;Flin…

Visio文件编辑查看工具Visio Viewer for Mac

Visio Viewer for Mac可以打开和查看Visio文件&#xff08;.vsd、.vdx和.vsdm文件&#xff09;。它具有简单易用的用户界面&#xff0c;可以快速加载和显示Visio文件。此外&#xff0c;它还支持导出文件为PDF、PNG、JPEG等格式&#xff0c;方便用户进行文件转换和共享。 Visio…

Golang Json 编解码

编码 json.NewEncoder(<Writer>).encode(v) json.Marshal(&v) 解码 json.NewDecoder(<Reader>).decode(&v) json.Unmarshal([]byte, &v) 使用示例 type Person struct {Name string json:"name"Age int json:"age" } func ma…

《零基础入门学习Python》第053讲:论一只爬虫的自我修养

0. 请写下这一节课你学习到的内容&#xff1a;格式不限&#xff0c;回忆并复述是加强记忆的好方式&#xff01; 马上我们的教学就要进入最后一个章节&#xff0c;Pygame 嗨爆引爆全场&#xff0c;但由于发生了一个小插曲&#xff0c;所以这里决定追加一个章节&#xff0c;因为…

Qt Core学习日记——第四天QMetaEnum(下)

类定义&#xff1a; 成员变量就只有QMetaObject *mobj和uint handle&#xff0c;handle同样用于计算在qt_meta_stringdata_XTest的位置 成员函数&#xff1a; 接下以test类进行函数讲解 test.h #pragma once #include <qobject.h> #include <QFlags> class X…

有些能力,是工作中学不来的,看看这篇超过90%同行

俗话说:360行&#xff0c;行行转IT。 在就业形势压力巨大的今天&#xff0c;不仅仅是计算机专业的毕业生&#xff0c;很多其他专业的大学生都选择转行从事计算机行业。 尤其是软件测试行业&#xff0c;远远超出其他行业的薪水和广阔的就业前景&#xff0c;吸引了大批应届毕业…

QT DAY1

1.思维导体 2.作业 #include "widget.h"Widget::Widget(QWidget *parent): QWidget(parent) {qDebug()<<this->size();qDebug()<<this->rect().size();qDebug()<<this->geometry().size();qDebug()<<this->frameGeometry().siz…

视频增强技术-对比度增强

在图像处理中&#xff0c;由于获取的图像质量不好&#xff0c;需要通过对比度增强来提升图片质量&#xff0c;主要解决的是由于图像灰度级范围较小造成的对比度较低的问题&#xff0c;作用是使图像的灰度级范围放大&#xff0c;从而让图像更加清晰。主要对比度增强方法包括线性…

macbook 软件iMovie for Mac(专业视频剪辑工具)中文版

iMovie mac中文版是一款针对Mac平台量身定做的视频编辑工具&#xff0c;软件凭借流线型设计和直观的编辑功能&#xff0c;可以让您感受前所未有的方式制作好莱坞风格的预告片和精美电影&#xff0c;并且还可以浏览视频资料库&#xff0c;快速共享挚爱瞬间&#xff0c;创建精美的…

DevOps自动化平台开发之 Shell脚本执行的封装

基础知识 基于如下技术栈开发DevOps平台 Spring Boot Shell Ansible Git Gitlab Docker K8S Vue 1、spring boot starter的封装使用 2、Shell脚本的编写 3、Ansible 脚本的编写 4、Docker 的使用与封装设计 本篇介绍如何使用Java封装Linux命令和Shell脚本的使用 将其设计成…

文件上传漏洞

什么是文件上传漏洞&#xff1f; 攻击者上传了一个可执行文件如木马&#xff0c;病毒&#xff0c;恶意脚本&#xff0c;WebShell等到服务器执行&#xff0c;并最终获得网站控制权限的高危漏洞。 webshell 非法用户可利用上传的恶意脚本文件控制整个网站&#xff0c;甚至控制服…

直线导轨的主要功能

直线导轨是一种常见的机械结构&#xff0c;用于工业机器人、数控机床和其他自动化装置中。它的作用是提供一个准确的直线运动轨道&#xff0c;使得设备能够在预定的路径上进行精确的移动。 直线导轨作为一种重要的机械基础件&#xff0c;在现代工业中得到了广泛的应用。它主要的…

Elasticsearch源码调试实操

环境准备 请严格按照以下版本操作&#xff0c;不同软件版本可能会出现兼容性问题导致失败 1.es源码&#xff1a;https://github.com/elastic/elasticsearch/archive/v7.8.0.zip 2.gradle-6.5-all.zip&#xff1a;https://services.gradle.org/distributions/ 3.jdk14&#xff…

英语写作中“提高”、“加强”、“促进”boost、bolster、foster、facilitate等的用法

一、由于“加强”、“促进”是非常常用的表达&#xff0c;所以这方面的词汇比较多&#xff0c;简单的有improve、enhance、promote、strengthen 、reinforce 、encourage 等&#xff0c;另外还有boost、bolster、foster、facilitate 等。写作中为了避免improve和enhance 等简单…

min_free_kbytes

转自&#xff1a;技术分享 | MemAvailable 是怎么计算的-腾讯云开发者社区-腾讯云 背景 前两天安装 OceanBase 时遇到一个小问题&#xff1a; 很明显&#xff0c;安装OB时要求服务器可用内存至少 8G&#xff0c;不达标就无法安装。为了凑这3台10G内存的服务器我已经费了不少劲…

vue-页面使用websocket建立连接用于测试

前言 websocket双向通讯在项目中经常使用&#xff0c;但一般都是封装成第三方包&#xff0c;登录&#xff0c;退出建立连接。 这样使用是合理&#xff0c;但不便于测试&#xff0c;其实在.vue页面通过new方式可以直接使用websocket。 在页面实例加载完成之后连接websocket&am…

Yunfly 一款高效、性能优异的node.js企业级web框架

介绍 Yunfly 一款高性能 Node.js WEB 框架, 使用 Typescript 构建我们的应用。 使用 Koa2 做为 HTTP 底层框架, 使用 routing-controllers 、 typedi 来高效构建我们的 Node 应用。 Yunfly 在 Koa 框架之上提升了一个抽象级别, 但仍然支持 Koa 中间件。在此基础之上, 提供了一…

运动控制-PID算法

PID原理介绍及C#编程仿真 https://blog.csdn.net/panjinliang066333/article/details/104428683

【Redis深度专题】「核心技术提升」探究Redis服务启动的过程机制的技术原理和流程分析的指南(集群功能分析)

探究Redis服务启动的过程机制的技术原理和流程分析的指南&#xff08;集群功能分析&#xff09; Redis集群的出现背景提升性能扩展性 Redis集群概述Redis Cluster特性分布Redis Cluster的Failover机制Redis集群节点宕机集群如何判断节点是否挂掉集群进入失败状态的必要条件 Fai…