如何将表格中的状态数据转换为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标签显示
考虑到系统前端页面的美观程度,通常通过Tag标签来代替某条数据中的状态信息。仅通过一点操作,便能够使得页面美观程度得到较大提升,前后对比如下所示。代码基于Vue以及Element-ui组件实现。 修改前: 修改后: 修改前…...
centos中修改防火墙端口开放配置
1、直接进入文件修改 vim /etc/sysconfig/iptables 2、添加需要开放的端口 (1)添加需要开放的单个端口 4001 -A INPUT -m state --state NEW -m tcp -p tcp --dport 4001 -j ACCEPT (2)添加需要开放的某个网段端口 4001:4020 …...
程序设计 算法基础
✅作者简介:人工智能专业本科在读,喜欢计算机与编程,写博客记录自己的学习历程。 🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心&…...
【数据结构】之十分好用的“链表”赶紧学起来!(第一部分单向链表)
💐 🌸 🌷 🍀 🌹 🌻 🌺 🍁 🍃 🍂 🌿 🍄🍝 🍛 🍤 📃个人主页 :阿然成长日记 …...
ubuntu开机自启动
ubuntu开机自启动 1、建一个test.sh脚本,并写入 #!/bin/sh gnome-terminal -x bash -c ‘cd /home/文件路径/;python3 main.py’ exit 0 2、:wq!保存 3、创建rc-local.service文件(sudo vim /etc/systemd/system/rc-local.service)…...
Git将其他分支合并至主分支
主要思想: 把分支代码合并到master,合给谁,就先切换到谁的分支 1. 当前分支是dev,开发完成后,需要合并到master分支 先把该提交的提交,需要push的push完成后,再切换分支。 否则也会告诉你要提交…...
Python+request+pytest 接口自动化测试框架入门(与unittest的比较)
1. Pythonrequestpytest 接口自动化测试框架入门 - 简书 pytest和unittest的比较: pytest是一个非常成熟的全功能的Python测试框架,主要有以下几个特点: 简单灵活,容易上手支持参数化能够支持简单的单元测试和复杂的功能测试&a…...
数据结构——复杂度
总有一天你要一个人,再暗夜中,向那座桥走过去 文章目录 一、算法的复杂度 考察形式范例 二、算法的时间复杂度 大O的渐进表示法 常见的复杂度对比 例题:消失的数字 题目的三种思路 1.排序遍历 2.减法 3.单身狗思想 三、空间复杂度…...
使用goldengate 迁移Oracle到postgresql
环境: --源端: IP:10.0.4.16 hostname:tencent Oracle数据库版本:12.2.0.1.0 ogg for oracle版本:19.1.0.0.4 SID:orcl --目标端: IP: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…...
服务器被爬虫恶意攻击怎么办?
在有预算的情况可以采购第三方服务防火墙,没钱就使用开源的WAF进行防护。 # WAF防火墙的基本防护原理 WAF(Web 应用防火墙)可以使用多种技术来防止恶意爬虫攻击,例如: 1. 黑名单:WAF 可以使用黑名单技术来…...
JavaScript正则表达式之座机号/手机号验证校验规则
引用:https://www.bilibili.com/read/cv18300539/ 本文对利用正则表达式对手机号码进行了验证 支持格式: 座机 :xxx-xxxxxxxx、xxxxxxxxxxxx …座机区号的横杠可有可无 手机:xxxxxxxxxxx JavaScript: var: checkPhone (rule,…...
黑客学习手册(自学网络安全)
一、首先,什么是黑客? 黑客泛指IT技术主攻渗透窃取攻击技术的电脑高手,现阶段黑客所需要掌握的远远不止这些。 二、为什么要学习黑客技术? 其实,网络信息空间安全已经成为海陆空之外的第四大战场,除了国…...
获取非叶子节点的grad(retain_grad()、hook)【为了解决grad值是None的问题】
在调试过程中, 有时候我们需要对中间变量梯度进行监控, 以确保网络的有效性, 这个时候我们需要打印出非叶节点的梯度, 为了实现这个目的, 我们可以通过两种手段进行, 分别是: retain_grad()hook 不过我感觉“hook”比“retain_grad()”要麻烦.....,所以我感觉还是…...
JMeter(八):响应断言详解
响应断言 :对服务器的响应进行断言校验 (1)应用范围: main sample and sub sample, main sample only , sub-sample only , jmeter variable 关于应用范围,我们大多数勾选“main sample only” 就足够了,因为我们一个请求,实质上只有一个请求。但是当我们发一个请求时,…...
【网络编程】IO复用的应用一:非阻塞connect
在connect连接中,若socket以非阻塞的方式进行连接,则系统内设置的TCP三次握手超时时间为0,所以它不会等待TCP三次握手完成,直接返回,错误为EINPROGRESS。 所以,我们可以通过判断connect时返回的错误码是…...
Spring注解开发,bean的作用范围及生命周期、Spring注解开发依赖注入
🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 c语言 数据结构 javaweb 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 Spring注解开发 一、注解开发定义Bean二、纯注解开发Bean三…...
C#设计模式之---原型模式
原型模式(Prototype Pattern) 原型模式(Prototype Pattern) 是用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。原型模式是一种创建型设计模式。也就是用一个已经创建的实例作为原型,通过…...
STM32入门学习之外部中断
1.STM32的IO口可以作为外部中断输入口。本文通过按键按下作为外部中断的输入,点亮LED灯。在STM32的19个外部中断中,0-15为外部IO口的中断输入口。STM32的引脚分别对应着0-15的外部中断线。比如,外部中断线0对应着GPIOA.0-GPIOG.0,…...
Jenkins 配置maven和jdk
前提:服务器已经安装maven和jdk 一、在Jenkins中添加全局变量 系统管理–>系统配置–>全局属性–>环境变量 添加三个全局变量 JAVA_HOME、MAVEN_HOME、PATH 二、配置maven 系统管理–>全局工具配置–>maven–>新增 新增配置 三、配置JDK 在系统管…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
C++:std::is_convertible
C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...
Objective-C常用命名规范总结
【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名(Class Name)2.协议名(Protocol Name)3.方法名(Method Name)4.属性名(Property Name)5.局部变量/实例变量(Local / Instance Variables&…...
深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要: 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式(自动驾驶、人工驾驶、远程驾驶、主动安全),并通过实时消息推送更新车…...
软件工程 期末复习
瀑布模型:计划 螺旋模型:风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合:模块内部功能紧密 模块之间依赖程度小 高内聚:指的是一个模块内部的功能应该紧密相关。换句话说,一个模块应当只实现单一的功能…...
leetcode73-矩阵置零
leetcode 73 思路 记录 0 元素的位置:遍历整个矩阵,找出所有值为 0 的元素,并将它们的坐标记录在数组zeroPosition中置零操作:遍历记录的所有 0 元素位置,将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...
