element-ui更改单元格字体颜色

news2025/1/11 11:44:56

作者创建的项目为vue3+ts,写法上有些需要注意的点:

  • 如果script 标签使用了 setup,这个时候 export 是没有必要的,也就是使用了setup 后,就不要再写 export 了,不然会报错“A default export must be at the top level of a file or module declaration”
  • 本来想使用过滤器,但是发现vue3删掉了过滤器filter功能,官方建议:用方法调用或计算属性替换过滤器——vue3.0中为啥要删除过滤器功能,因为功能重复吧?
  • vue3的插槽使用方法发生了改变,# 等同于 slot= ——vue3的slot插槽用法,slot-scope are deprecated

在插槽中使用行内样式更改一整列数据颜色

在这里插入图片描述

<el-table-column prop="date" label="日期" >
	<template #="scope">
	    <div style="color:#fec632">
	        {{ scope.row.date }}
	    </div>
	</template>
</el-table-column>

使用element-ui中的tag标签

  • 大部分时候表格内的数据需要用不同的颜色标注是因为数据有不同的状态,前辈建议我用element-ui中的标签,tag标签可以自定义按钮的颜色

例子:
在这里插入图片描述

<el-table-column prop="status" label="状态" >
        <template #="scope">
          <el-tag
            :color="statusColor(scope.row.status)"
            style="color: #ffffff; border-color: transparent"
            size="mini"
            disable-transitions
          >
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
const statusColor = computed(() => {
  return function (status:string){
    switch(status){
        case "未开始":
            return "#ff4949";
            break;
        case "进行中":
            return "#ffba00";
            break;
        case "已完成":
            return "#5ccb91";
            break;
    }
  }
})

有哪些不合适的地方欢迎指正(●’◡’●)

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

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

相关文章

(通用0bug)纯原生实现一个类似浏览器搜索功能(ctrl + f)

如果可以实现记得点赞分享&#xff0c;谢谢老铁&#xff5e; 一、问题的描述 由于公司业务需要在搜索框中&#xff0c;模拟Ctrl F 的搜索功能&#xff0c;支持自选可搜索区域范围&#xff0c;且支持回车查看下一个&#xff0c;上下查看&#xff0c;自动滚动定位&#xff0c;…

OpenAI新作,直指DeepMind格局小了!大模型复杂推理应逐步验证

作者 | Python、Zenmoore 谷歌旗下的DeepMind&#xff0c;因AlphaGo而名声大振&#xff1b;而推出ChatGPT的OpenAI&#xff0c;近日更是如日中天。 然而&#xff0c;OpenAI公开了一篇论文[1]&#xff0c;结论同DeepMind去年11月的工作[2]完全相反。在对比差异时&#xff0c;论…

【AI】dragonGPT - 单机部署、极速便捷

dragonGPT 从数据私有化&#xff0c;到prompt向量库匹配&#xff0c;再到查询&#xff0c;一条龙服务&#xff0c;单机部署&#xff0c;极简操作 pre a.需要下载gpt4all model到本地. ggml Model Download Link 然后将存放model的地址写入.env MODEL_PATH your pathb.…

安卓系统远程控制电脑方法

要从安卓设备远程控制计算机&#xff0c;您可以使用专门为此目的设计的远程桌面软件或应用程序。 以下是使用安卓设备远程控制计算机的一般方法&#xff1a; 选择一个远程桌面应用程序&#xff1a;比如 Splashtop 远程控制软件。 在计算机上安装远程桌面软件&#xff1a;要实…

【map和set的封装】

文章目录 前言1 大致框架2 迭代器3 map和set的封装 前言 上篇博客已经讲解了红黑树插入的模拟实现&#xff0c;这篇文章的目的是利用上节课讲解的底层实现来封装map和set.参考代码借鉴的是STL SGI版本3.0 1 大致框架 首先我们来看看源码里面怎么定义的: 从源码中我们不难发现m…

什么是分布式事务?

什么是分布式事务&#xff1f; 分布式对应的是单体架构&#xff0c;互联网早起单体架构是非常流行的&#xff0c;好像是一个家族企业&#xff0c;大家在一个家里劳作&#xff0c;单体架构如下图&#xff1a; 但是随着业务的复杂度提高&#xff0c;大家族人手不够&#xff0c;…

Redis中的哈希结构(Dict)

前言 哈希结构是一个在计算机中非常常见的结构。哈希结构可以让我们在O(1)时间复杂度查找元素并且对其操作&#xff0c;并且增删改查性能并不会随着数据量的增多而改变。反而数据量的增大&#xff0c;会出现两个关键问题&#xff0c;一个是哈希冲突&#xff0c;另一个是rehash…

15、Spring框架

目录 什么是Spring Spring优点 Spring体系结构 Spring新特性 Spring的入门程序 新建立Maven项目 创建名为HelloSpring的类 新建applicationContext.xml文件 XML文件的约束信息配置 测试类TestHelloSpring 控制反转 依赖注入 依赖注入和控制反转的比较 依赖注入的…

虚拟机类加载机制

目录 1、概述 2、类加载的过程 1、过程总览 2、加载 3、链接-验证 4、链接-准备 5、链接-解析 6、初始化 7、总结 3、类加载的时机 4、类加载器 1、概述 2、类与类加载器 3、三层类加载器 4、双亲委派模型 5、其他加载策略 1、概述 一个Java类会被编译成一个Cl…

grep,sed,awk实战

grep -E ^(root|sshd)\> /etc/passwd 找出以root或者sshd开头的&#xff0c;且只含root或者sshd,>表示匹配到root或者sshd就结束了&#xff0c;类似情况如下图&#xff1a; grep -c ^yu /etc/passwd 匹配含yu这个用户出现的次数 grep -m 2 ^yu /etc/passwd …

arthas使用

文章目录 ArthasArthas&#xff08;阿尔萨斯&#xff09;能为你做什么&#xff1f;安装1.linux中使用2.docker中使用 命令列表jvm 相关class/classloader 相关monitor/watch/traceprofiler/火焰图 Arthas Arthas 是一款线上监控诊断产品&#xff0c;通过全局视角实时查看应用 …

windows nvm 安装过程

1. 官网 Releases coreybutler/nvm-windows GitHubA node.js version management utility for Windows. Ironically written in Go. - Releases coreybutler/nvm-windowshttps://github.com/coreybutler/nvm-windows/releases 下载 nvm-setup.exe; 2. 安装完成后后&#x…

Golang Channel 实现原理与源码分析

Do not communicate by sharing memory; instead, share memory by communicating. 通过通信来共享内存&#xff0c;而不是共享内存来通信 安全访问共享变量是并发编程的一个难点&#xff0c;在 Golang 语言中&#xff0c;倡导通过通信共享内存&#xff0c;实际上就是使用 chan…

23种设计模式之访问者模式(Visitor Pattern)

前言&#xff1a;大家好&#xff0c;我是小威&#xff0c;24届毕业生&#xff0c;在一家满意的公司实习。本篇文章将23种设计模式中的访问者模式&#xff0c;此篇文章为一天学习一个设计模式系列文章&#xff0c;后面会分享其他模式知识。 如果文章有什么需要改进的地方还请大佬…

chatgpt没有免费版的吗?如何使用ChatGPT?

ChatGPT是基于GPT模型的聊天机器人&#xff0c;目前没有免费版。ChatGPT是由OpenAI开发的&#xff0c;OpenAI的GPT模型需要大量的计算资源和技术支持&#xff0c;因此需要付费才能使用。 目前&#xff0c;OpenAI提供了两种方式来使用GPT模型&#xff1a; 1. OpenAI API OpenA…

制造型企业降本增效的最佳工具,质量管理系统,该如何利用好

许多制造业企业质量管理主要用于解决制造业质检效率低下、作业不规范等难题&#xff0c;形成质量检验、质量方案、档案数据、统计分析一体化的质量管理体系&#xff0c;有效为企业质量管理提速降本增效&#xff0c;实现企业数字化转型。在没有正确利用质量管理系统之前&#xf…

45个 Cha​tGPT 常用插件说明

45个 ChatGPT 常用插件说明 ChatGPT常用的45个插件&#xff0c;以及它们用途说明&#xff1a; 1/ Slack&#xff1a;查询Slack信息 2/ Zapier&#xff1a;与5000应用&#xff0c;如Google Sheets和Docs进行交互。 3/ Expedia&#xff1a;在一个地方激活你的旅行计划 4/ Kla…

Worldclim(v1.4、v2.1)数据集使用介绍

最近在使用Worldclim的数据&#xff0c;在这里记录一下该数据集的使用。 如果你想得到过去、现在和未来的气候数据&#xff0c;那么你可以使用这个数据集&#xff1a;Worldclim数据集 该数据集包含了4种时期的气候数据&#xff1a;历史时期的末次盛冰期、全新世中期、当前时…

操作系统(3.3)--线程的实现方式

进程调度的任务、机制和方式 1.进程的调度任务 进程调度的任务主要有三&#xff1a; (1)保存处理机的现场信息。在进程调度进行调度时&#xff0c;首先需要保存当前进程的处理机的现场信息&#xff0c;如程序计数器、多个通用寄存器中的内容等 (2)按某种算法选取进程。调度…

脉冲神经网络深度残差学习(ResNet)

来源&#xff1a;投稿 作者&#xff1a;小灰灰 编辑&#xff1a;学姐 论文标题&#xff1a;Deep Residual Learning in Spiking Neural Networks 论文链接: https://arxiv.org/pdf/2102.04159v3.pdf 代码链接&#xff1a;https: //github.com/fangwei123456/Spike-Element-Wi…