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

如何将表格中的状态数据转换为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>

相关文章:

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

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

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 …...

程序设计 算法基础

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

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

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

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…...

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

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

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

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

数据结构——复杂度

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

使用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&#…...

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…...

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

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

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

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

黑客学习手册(自学网络安全)

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

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

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

JMeter(八):响应断言详解

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

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

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

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

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

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

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

STM32入门学习之外部中断

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

Jenkins 配置maven和jdk

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

LLM 笔记:Speculative Decoding 投机采样

1 基本介绍 投机采样&#xff08;Speculative Sampling&#xff09;是一种并行预测多个可能输出&#xff0c;然后快速验证并采纳正确部分的加速策略 在不牺牲输出质量的前提下&#xff0c;减少语言模型生成 token 所需的时间 传统的语言模型生成是 串行 的 必须生成一个&…...

北京大学肖臻老师《区块链技术与应用》公开课:12-BTC-比特币的匿名性

文章目录 1.比特币的匿名性不是真的匿名&#xff0c;相当于化名&#xff0c;现金是真的匿名&#xff0c; 2.如果银行用化名的话和比特币的匿名哪个匿名性更好&#xff1f; 银行匿名性比比特币好&#xff0c;因为比特币的区块链的账本是完全公开的&#xff0c;所有人都可以查&am…...

数学复习笔记 27

前言 太难受了。因为一些事情。和朋友倾诉了一下&#xff0c;也没啥用&#xff0c;几年之后不知道自己再想到的时候&#xff0c;会怎么考虑呢。另外&#xff0c;笔记还是有框架一点比较好&#xff0c;这样比较有逻辑感受。不然太乱了。这篇笔记是关于线代第五章&#xff0c;特…...

机器学习监督学习实战五:六种算法对声呐回波信号进行分类

本项目基于UCI的声呐目标识别数据集&#xff08;Sonar, Mines vs. Rocks&#xff09;&#xff0c;通过10种机器学习算法比较&#xff0c;发现集成学习方法表现最优。研究首先对60个声呐能量特征进行可视化分析&#xff08;分布直方图、相关性矩阵&#xff09;&#xff0c;对比了…...

金融系统渗透测试

金融系统渗透测试是保障金融机构网络安全的核心环节&#xff0c;它的核心目标是通过模拟攻击手段主动发现系统漏洞&#xff0c;防范数据泄露、资金盗取等重大风险。 一、金融系统渗透测试的核心框架 合规性驱动 需严格遵循《网络安全法》《数据安全法》及金融行业监管要求&am…...

C#使用MindFusion.Diagramming框架绘制流程图(2):流程图示例

上一节我们初步介绍MindFusion.Diagramming框架 C#使用MindFusion.Diagramming框架绘制流程图(1):基础类型-CSDN博客 这里演示示例程序: 新建Windows窗体应用程序FlowDiagramDemo,将默认的Form1重命名为FormFlowDiagram. 右键FlowDiagramDemo管理NuGet程序包 输入MindFusio…...

libiec61850 mms协议异步模式

之前项目中使用到libiec61850库&#xff0c;都是服务端开发。这次新的需求要接收服务端的遥测数据&#xff0c;这就涉及到客户端开发了。 客户端开发没搞过啊&#xff0c;挑战不少&#xff0c;但是人不就是通过战胜困难才成长的嘛。通过查看libiec61850的客户端API发现&#xf…...

如何理解机器人课程的技术壁垒~壁垒和赚钱是两件不同的事情

答疑&#xff1a; 有部分朋友私聊说博客内容&#xff0c;越来越不适合人类阅读习惯…… 可以做这种理解&#xff0c;我从23年之后&#xff0c;博客会不会就是写给机器看的。 或者说我在以黑盒方式测试AI推荐的风格。 主观-客观-主观螺旋式发展过程。 2015最早的一篇博客重…...

html、css(javaweb第一天)

HTML: 文字、图片、视频组成 由标签组成的语言 行内标签span//无语意 <img src"url">//图片 <a herf"url" target"是否开新页面">点击谁</a>//超链接 <video src"url" controls></video>//controls播放…...

【读论文】U-Net: Convolutional Networks for Biomedical Image Segmentation 卷积神经网络

摘要1 Introduction2 Network Architecture3 Training3.1 Data Augmentation 4 Experiments5 Conclusion背景知识卷积激活函数池化上采样、上池化、反卷积softmax 归一化函数交叉熵损失 Olaf Ronneberger, Philipp Fischer, Thomas Brox Paper&#xff1a;https://arxiv.org/ab…...