如何将表格中的状态数据转换为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技术主攻渗透窃取攻击技术的电脑高手，现阶段黑客所需要掌握的远远不止这些。 二、为什么要学习黑客技术？ 其实，网络信息空间安全已经成为海陆空之外的第四大战场，除了国…...
、hook）【为了解决grad值是None的问题】)
获取非叶子节点的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 在系统管…...
: K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？)
云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？
大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
高频面试之3Zookeeper
高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个？3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制（过半机制࿰…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码，专为学校招生场景量身打造，功能实用且操作便捷。 从技术架构来看，ThinkPHP提供稳定可靠的后台服务，FastAdmin加速开发流程，UniApp则保障小程序在多端有良好的兼…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下，卢森堡罗伯特舒曼医院（the Robert Schuman Hospitals, HRS）凭借在无菌制剂生产流程中引入增强现实技术（AR）创新项目，荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中，理解API（应用程序接口）和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能，使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人，点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置，详见说明文档 成功后，记录Webhook 2 API文档说明 点击设置说明 查看自…...
C++实现分布式网络通信框架RPC(2)——rpc发布端
有了上篇文章的项目的基本知识的了解，现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...