Vue数据项加圆点

news2024/11/24 19:49:23

目录

Html

样式

方法


Html


      <el-table-column prop="status" label="数据状态" header-align="center" width="200">
        <template slot-scope="scope">
          <div style="display: flex; justify-content: center; align-items: center;">
            <span slot="reference" style=" margin-right: 8px;">
              <i class="dotClass" :style="getColor(scope.row.status)"></i>
            </span>
            {{ paramFormat(scope.row.status) }}
          </div>
        </template>
      </el-table-column>

样式

.dotClass {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

方法

    getColor(data) {
      if (data == "one") {
        return "#67C23A";
      } else if (data == "two") {
        return "#F56C6C";
      }
        ...
    },

有用请点赞,养成良好习惯!

疑问、交流、鼓励请留言!

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

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

相关文章

六大组件助力大屏一键升级!老板当场拍案叫绝!

上个礼拜参加高中同学聚会&#xff0c;大家在饭桌上聊自己的工作&#xff0c;各自吐槽后发现大家真的是各有各的不容易&#xff01;有个和我一样做数据分析工作的兄弟&#xff0c;喝了点小酒后&#xff0c;情绪上头直接在饭桌上大吐苦水&#xff0c;疯狂diss他领导。 他说本来…

java项目之二手车交易网站(ssm+mysql+jsp)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的二手车交易网站。技术交流和部署相关看文章末尾&#xff01; 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框架&a…

【图形学入门】概述(Overview)

本文基于GAMES 101课程进行记录和总结。 概念 计算机图形学&#xff08;Computer Graphics&#xff0c;俗称CG&#xff09;&#xff0c;是一种使用数学算法将二维或三维图形转化为计算机显示器的栅格形式的科学&#xff08;或使用计算机合成和操作视觉/图像图形的信息&#xf…

【Linux操作系统】多线程初步概念

文章目录 多线程初步概念线程的优点线程的缺点线程异常线程用途Linux进程VS线程 多线程初步概念 在一个程序里的一个执行路线就叫做线程&#xff08;thread&#xff09;。更准确的定义是&#xff1a;线程是“一个进程内部的控制序列”。一个进程至少都有一个执行线程。线程是一…

pandas 笔记 style 调整DataFrame格式

1 format 1.0 数据 # Visual Python: Data Analysis > File vp_df pd.read_csv(https://raw.githubusercontent.com/visualpython/visualpython/main/visualpython/data/sample_csv/iris.csv) vp_dfvp_df[:5] vp_df.at[0,sepal_length]np.nan vp_df.at[2,sepal_length]10…

进程和线程的本质区别

前几天有个同学问我&#xff0c;为什么electron是多进程而不是多线程&#xff1f;今天总结一下&#xff0c;对这个问题做下解答。 首先我们先了解下进程的概念&#xff1a;进程是计算机分配资源的最小单位。 简单地说&#xff0c;进程是一个容器。比如一间漂亮的小别墅&#x…

asp.net core框架搭建1-搭建webapi,对数据增删改查接口模板(附源码)

文章目录 系列文章1.项目搭建1.1 新建Asp.net core webapi项目1.2 配置连接Mysql1.3 实现对mysql数据库的数据增删改查&#xff0c;接口1.3.1 根据id查询数据1.3.2 根据用户名模糊查询数据&#xff0c;并分页1.3.3 新增用户数据1.3.4 修改用户数据1.3.5 根据ID删除数据1.3.6 接…

针对工业网络攻击的五个关键控制措施

人们普遍持有一种过时的误解&#xff0c;认为成功的网络攻击只会造成信息和数据损坏或窃取信息和数据。 但随着互联性的增强和物联网的兴起&#xff0c;存在一种不同类型的网络威胁&#xff0c;其动机更加险恶&#xff0c;对关键民用基础设施造成物理损害&#xff0c;并可能造…

VTS表格数据查看与转换

说明 vts是由formula one生成的文件后缀名&#xff0c;它兼容中文&#xff0c;具备类似EXCEL的功能&#xff1a;如格式编排、制作表格线、移动和复制单元格、单元格的计算、画简单框图等等。 查看与转换 直接执行脚本&#xff0c;自动注册ttf16.OCX&#xff0c;打开TTF1.ex…

Java版本企业电子招投标采购系统源码——功能模块功能描述

功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为外部供…

第十一章:C语言数据结构与算法初阶之排序

系列文章目录 文章目录 系列文章目录前言排序的概念及其运用排序的概念常见的排序算法 常见排序算法的实现1.直接插入排序2. 希尔排序&#xff08;缩小增量排序&#xff09;3. 直接选择排序4. 堆排序5. 冒泡排序6. 快速排序将区间按照基准值划分为左右两半部分的常见方式&#…

为Kubernetes(k8s)集群安装仪表盘(Dashboard)

为Kubernetes集群安装仪表盘 文档说明部署仪表盘(Dashboard UI)访问 Dashboard 用户界面 文档说明 对应本片文章的视频教程地址&#xff1a;https://www.bilibili.com/video/BV1MF41197RS/?vd_source98deeeab6739fa30792cfcffa994b50e 在之前的文章当中我们搭建了一个kubern…

Spring接收前端传递数据的方式

搭建项目 然后点击下一步完成即可搭建成功 在pom文件中导入lombok的jar包,帮助我们快速创建实体类 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.16</version> </dependency&…

腾讯云服务器CPU处理器大全_性能测评

腾讯云服务器CPU采用什么处理器型号&#xff1f;主频睿频多少&#xff1f;腾讯云服务器CPU性能如何&#xff1f;云服务器CVM规格不同CPU型号也不同&#xff0c;轻量应用服务器的CPU处理器性能如何&#xff1f;腾讯云服务器网分享腾讯云服务器CPU处理器大全&#xff1a; 目录 …

Win10+Anaconda+RTX3070+Pytorch-GPU深度学习环境搭建

一、CUDA安装 1. 查询CUDA driver版本&#xff1a; 2. 下载并安装&#xff1a; CUDA Toolkit Archive | NVIDIA DeveloperPrevious releases of the CUDA Toolkit, GPU Computing SDK, documentation and developer drivers can be found using the links below. Please sele…

MFC第十五天 HWND与CWnd对象之间的转换、CWnd类简介(补充)、员工管理系统登录界面眼睛捕获(补充)

文章目录 HWND与CWnd对象之间的转换CWnd类简介&#xff08;补充&#xff09;cwnd系统函数Coordinate Mapping Functions 坐标系转换窗口树 Window tree access计时器管理Window Access Functions 窗口访问功能Window Text Functions 窗口文本函数Window State FunctionsCMenu F…

matlab将0 1矩阵显示为黑白图像

解决方法 clear clc pattern cell2mat(struct2cell(load("pattern"))); pic1 squeeze(pattern(1:64,:,:,:)); pic1 logical(permute(pic1, [2,3,1])); temp pic1(:,:,1); imshow(pic1(:,:,1));显示效果 test int8(rand(30,30)); imshow(logical(test));本来想…

CANoe运行时改变系统变量的值的几种方式

在CANoe运行时,想要随时改变系统变量的值为任意值,怎么办?(这里的值指的是数值) 我们在CANoe工程上创建一个系统变量: 改变系统变量的值,我们第一时间想到的是在CAPL中用代码实现: on key a {@sysvar::ControlPanel::EngineSpeed = 10; }通过一个按键’a’的事件程序…

前端选择时间范围关联日期快速查询

效果图 html部分 <div class"select-list"><ul><li><label>时间&#xff1a;</label><select id"timeInterval"><option value"1">自定义</option><option value"2">当天<…

手机切换ip地址会遇的问题以及解决方法汇总

手机切换IP地址是一种常见的操作&#xff0c;它可以帮助用户解决一些网络问题&#xff0c;提高网络连接速度&#xff0c;或者绕过某些限制。然而&#xff0c;在进行IP地址切换时&#xff0c;用户可能会遇到一些问题。本文将详细介绍手机切换IP地址可能遇到的问题&#xff0c;并…