当前位置: 首页 > article >正文

Vue2:el-table中的文字根据内容改变颜色

想要实现的效果如图,【级别】和【P】列的颜色根据文字内容变化

1、正常创建表格

<template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column prop="id" label="ID"/>      
      <el-table-column prop="subject" label="Bug标题"/>      
      <el-table-column prop="severity" label="级别"/>      
    </el-table>
  </template>

2、添加作用域插槽

在el-table-column中定义一个作用域插槽,在作用域插槽中,可以通过scope对象来访问el-table列中的数据,并使用:style绑定内联样式来设置文字颜色。


                

http://www.kler.cn/a/488114.html

相关文章:

  • Rust 中调用 Drop 的时机
  • 闲谭SpringBoot--ShardingSphere分库分表探究
  • Spring项目创建流程及配置文件bean标签参数简介
  • 【Logstash03】企业级日志分析系统ELK之Logstash 过滤 Filter 插件
  • 【网络安全 | 漏洞挖掘】HubSpot 全账户接管(万字详析)
  • 使用Llama 3.1创建合成数据集以调优你的大型语言模型
  • Spring——自动装配
  • C++笔记之`size_t`辨析
  • Untiy中如何嵌入前端页面,从而播放推流视频?
  • Colossal-AI:深度学习大规模分布式训练框架
  • 光伏风电新技术进展:迈向能源新时代
  • 如何在 Ubuntu 22.04 上安装和配置邮件服务器教程
  • 华晨宇新专辑《量变临界点》上线 开启自我觉知的音乐旅程
  • 灵活运用事务回滚,快捷处理多张数据表格
  • 14_Redis事务
  • 初学者关于对机器学习的理解
  • Go语言的循环实现
  • 基于 SpringBoot线上考试系统的设计与实现
  • java.lang.OutOfMemoryError: PermGen space报错处理
  • Autodl安装tensorflow2.10.0记录
  • Linux基本指令(1)
  • 【数据库】三、SQL语言
  • [IoT]物联网(IoT)网络的安全性
  • 量子技术的发展
  • ubuntu编译龙蜥6.6内核源码
  • Swin Transformer模型详解(附pytorch实现)