element-table表格中插入颜色块显示数据状态

news2025/2/2 10:54:36

dom部分:

 <el-table-column  label="是否异常">
        <template slot-scope="scope">
          <div class="dcs_sf_red" v-if="scope.row.sfyc == 0"></div>
          <div class="dcs_sf_green" v-if="scope.row.sfyc == 1"></div>
        </template>
      </el-table-column>

data部分:

data [
        {
          date: '00:00',
          mode: '固定模式',
          jhz: 120,
          sfyc: 0,
          sjz: 120,
          sfxy: 1,
          fkz: 110,
          cgfs: 1,
        }]

css部分

.dcs_sf_red{
  margin-left: 30%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FE685D;
}
.dcs_sf_green{
  margin-left: 30%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #5DFE96;
}

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

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

相关文章

【JavaWeb学习笔记】14 - 三大组件其二 Listener Filter

API文档JAVA_EE_api_中英文对照版 Listener 一、监听器Listener 1. Listener监听器它是JavaWeb的三大组件之一。 JavaWeb的三大组件分别是: Servlet程序、Listener监听器、Filter过滤器 2. Listener是JavaEE的规范&#xff0c;就是接口 3.监听器的作用是&#xff0c;监听某…

湖北省工程类助理工程师申报评审通过不是难事

湖北省工程类助理工程师申报评审通过不是难事 想要初级职称/助理工程师工程类&#xff0c;建筑施工、土木工程、市政、路桥、水利水电、机电、园林、测绘等一系列建筑类的初级职称。12月份交资料&#xff0c;春节前可以评审出来。 初级职称申报周期-一个月左右 一般初级职称申…

【容器Docker】Docker学习笔记

1、什么是Docker&#xff1a; Docker 将程序和程序运行所依赖的所有环境都打包到镜像里。“build once, run anywhere”Docker 是容器的一种实现。 Windows 下如何安装Docker: 官方安装教程&#xff1a;Install Docker Desktop on Windows | Docker Docs有两种安装套装&…

配置BGP的基本示例

目录 BGP简介 BGP定义 配置BGP目的 受益 实验 实验拓扑 ​编辑 组网需求 配置思路 配置步骤 配置各接口所属的VLAN 配置各Vlanif的ip地址 配置IBGP连接 配置EBGP 查看BGP对等体的连接状态 配置SwitchA发布路由10.1.0.0/16 配置BGP引入直连路由 BGP简介 BGP定义 …

四、Spring IoC实践和应用(基于注解方式管理 Bean)

本章概要 基于注解方式管理 Bean 实验一&#xff1a; Bean注解标记和扫描 (IoC)实验二&#xff1a; 组件&#xff08;Bean&#xff09;作用域和周期方法注解实验三&#xff1a; Bean属性赋值&#xff1a;引用类型自动装配 (DI)实验四&#xff1a; Bean属性赋值&#xff1a;基本…

01-基于粤嵌GEC6818实现屏幕的显示固定颜色进行自动切换

基于GEC6818实现屏幕颜色的切换 本文使用开发板GEC6818&#xff0c;实现屏幕显示特定颜色并且进行自动切换的功能。 文章目录 基于GEC6818实现屏幕颜色的切换一、 初始化开发板--&#xff08;开发板是新的则可以省略很多步骤&#xff09;1.1 **删除文件和文件夹**1.2 **查看磁盘…

STM32的以太网外设+PHY(LAN8720)使用详解(2):硬件设计

0 工具准备 1.野火 stm32f407霸天虎开发板 2.LAN8720数据手册 3.STM32F4xx中文参考手册1 PHY&#xff08;LAN8720&#xff09;硬件配置 1.1 硬件配置引脚说明 在LAN8720上电或复位时会读取一些特定引脚的电平&#xff0c;根据电平来进行硬件配置。LAN8720的引脚分布如下&…

在MongoDB中使用数组字段和子文档字段进行索引

本文主要介绍在MongoDB使用数组字段和子文档字段进行索引。 目录 MongoDB的高级索引一、索引数组字段二、索引子文档字段 MongoDB的高级索引 MongoDB是一个面向文档的NoSQL数据库&#xff0c;它提供了丰富的索引功能来加快查询性能。除了常规的单字段索引之外&#xff0c;Mong…

深度学习建模从零开始步骤流程

深度学习建模从零开始步骤流程 步骤如下&#xff1a; 环境准备三方库安装建模开发 环境准备 Anaconda安装&#xff1a; Anaconda下载网址&#xff0c;下载win10下的64位版本。 清华镜像站 下载完毕后点击安装&#xff0c;一直点确定或下一步 到上图点击 Just me&#xff…

基于SpringBoot的桃花峪滑雪场租赁系统 JAVA简易版

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 游客服务2.2 雪场管理 三、数据库设计3.1 教练表3.2 教练聘请表3.3 押金规则表3.4 器材表3.5 滑雪场表3.7 售票表3.8 器材损坏表 四、系统展示五、核心代码5.1 查询教练5.2 教练聘请5.3 查询滑雪场5.4 滑雪场预定5.5 新…

黑芝麻智能与亿咖通科技签署战略合作协议,深化协同助力智能驾驶量产落地

12月22日&#xff0c;全球智能汽车计算芯片引领者黑芝麻智能与全球出行科技企业亿咖通科技共同签署战略合作协议&#xff0c;通过深化合作&#xff0c;整合双方研发、产品和技术资源&#xff0c;联手打造领先智能驾驶系统解决方案&#xff0c;合力推进商业拓展和市场应用&#…

左值右值引用,完美转发

1.c98/03&#xff0c;类模板和函数模板只能含固定数量的模板参数&#xff0c;c11的新特性可以创建接受可变参数的函数模板和类模板 //Args是一个模板参数包&#xff0c;args是一个函数形参参数包 //声明一个参数包Args… args,这个参数包可以包括0到任意个模板参数 template&l…

Ignite数据流处理

数据流处理 #1.概述 Ignite提供了一个数据流API&#xff0c;可用于将大量连续的数据流注入Ignite集群&#xff0c;数据流API支持容错和线性扩展&#xff0c;并为注入Ignite的数据提供了至少一次保证&#xff0c;这意味着每个条目至少会被处理一次。 数据通过与缓存关联的数据…

【AI】YOLO学习笔记三-YOLOV5代码解析

YOLOv5是Glenn Jocher等人研发&#xff0c;它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型&#xff0c;其参数量依次上升&#xff0c;其效果也是越来越好。由于其代码是长期维护的且具有工程化的思维&#xff0c;所以方便应用在实际的项目中&…

【算法】使用二分查找解决算法问题:理解二分法思想,模板讲解与例题实践

文章目录 二分算法思想 / 性质 / 朴素模板二分查找的引入&#xff08;二段性&#xff09;704.二分查找 模板34.在排序数组中查找元素的第一个和最后一个位置 二分查找的前提条件 / 时间复杂度分析 算法题69.x的平方根35.搜索插入位置852.山脉数组的峰顶索引162.寻找峰值153.寻找…

Servlet-Filter 执行顺序测试

Servlet-Filter 执行顺序测试 对于 web.xml 文件注册过滤器这里就不多说了&#xff0c;就是谁声明的早&#xff0c;谁先被调用。因为在上面的过滤器信息最先被扫描到。 模型抽象 为了便于在实践中使用&#xff0c;结合部分底层原理&#xff0c;我们可以对 Filter 链的执行做…

【3D生成与重建】SSDNeRF:单阶段Diffusion NeRF的三维生成和重建

系列文章目录 题目&#xff1a;Single-Stage Diffusion NeRF: A Unified Approach to 3D Generation and Reconstruction 论文&#xff1a;https://arxiv.org/pdf/2304.06714.pdf 任务&#xff1a;无条件3D生成&#xff08;如从噪音中&#xff0c;生成不同的车等&#xff09;、…

PlatEMO UI 界面

&#x1f389; 博主相信&#xff1a; 有足够的积累&#xff0c;并且一直在路上&#xff0c;就有无限的可能&#xff01;&#xff01;&#xff01; &#x1f468;‍&#x1f393;个人主页&#xff1a; 青年有志的博客 &#x1f4af; Github 源码下载&#xff1a;https://github.…

【快速开发】使用SvelteKit

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

数据结构之进阶二叉树(二叉搜索树和AVL树、红黑树的实现)超详细解析,附实操图和搜索二叉树的实现过程图

绪论​ “生命有如铁砧&#xff0c;愈被敲打&#xff0c;愈能发出火花。——伽利略”&#xff1b;本章主要是数据结构 二叉树的进阶知识&#xff0c;若之前没学过二叉树建议看看这篇文章一篇掌握二叉树&#xff0c;本章的知识从浅到深的对搜索二叉树的使用进行了介绍和对其底层…