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

news/2024/7/10 2:22:00 标签: elementui, vue

作者创建的项目为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>

elementuitag_23">使用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.niftyadmin.cn/n/388953.html

相关文章

C语言学习分享(第九次)------数据的存储

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C语言学习分享⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多C语言知识   &#x1f51d;&#x1f51d; 数据的存储 1. 前言&#x1f6a9;2…

JAVA基础知识总结系列(4):JAVA封装

封 装&#xff08;面向对象特征之一&#xff09;&#xff1a;是指隐藏对象的属性和实现细节&#xff0c;仅对外提供公共访问方式。 好处&#xff1a;将变化隔离&#xff1b;便于使用&#xff1b;提高重用性&#xff1b;安全性。 封装原则&#xff1a;将不需要对外提供的内容都…

scratch找食物 中国电子学会图形化编程 少儿编程 scratch编程等级考试一级真题和答案解析2023年5月

目录 scratch找食物 一、题目要求 1、准备工作 2、功能实现 二、案例分析

Mybatis_plus——标准分页功能制作

mybatispuls中提供分页查询中需要两个参数&#xff0c;一个是IPage接口的实现类&#xff0c;还有一个后面说。 IPage有且只有一个实现类Page类型在里面已经提供有了&#xff0c;传两个参数即可使用&#xff0c;一个是页码值&#xff0c;一个是每页显示数据的条数。查询完之后可…

SharpContour论文精读

SharpContour: A Contour-based Boundary Refinement Approach for Efficient and Accurate Instance Segmentation 论文链接&#xff1a;[2203.13312] SharpContour: A Contour-based Boundary Refinement Approach for Efficient and Accurate Instance Segmentation (arxiv…

Markdown 语法的使用

1.标题的使用 #加空格 代表一级标题 &#xff0c;##加空格代表二级标题&#xff0c;一次类推&#xff0c;最多支持六级标题。 2.文本居中 <center>这是要居中的文本内容</center> 3.插入图片 方式简单粗暴 直接截图粘贴。 4.超链接 第一种&#xff1a;百度一…

RemoteSensing投稿流程

RemoteSensing投稿流程&#xff0c;底部有官网地址和word模板 RemoteSensing投稿流程&#xff0c;遇到的坑RemoteSensing期刊官网地址&#xff0c;模板 RemoteSensing投稿流程&#xff0c; ##3.16 Submit &#xff08;第一次提交&#xff09; 3.17 Under review &#xff08;正…

JAVA基础知识总结系列(2):JAVA语法基础

1&#xff0c;关键字&#xff1a;其实就是某种语言赋予了特殊含义的单词。 保留字&#xff1a;其实就是还没有赋予特殊含义&#xff0c;但是准备日后要使用过的单词。 2&#xff0c;标示符&#xff1a;Java中的包、类、方法、参数和变量的名字&#xff0c;可由任意顺序的大小写…