element 表格el-table的 :cell-style用法-表格固定行文字高亮

news2025/6/30 7:13:36

el-table的 :cell-style用法
实现表格固定行文字高亮效果
在这里插入图片描述

  <el-table
        ref="table"
        border
        stripe
        :data="list"
        :height="height"
        highlight-current-row
        :cell-style="cellStyle"
      >
       <el-table-column
          prop="code"
          label="规则编码"
          :min-width="120"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <el-popover
              v-show="row.error"
              placement="top"
              trigger="hover"
              content="规则异常"
            >
              <i slot="reference" class="remark-icon el-icon-warning-outline" />
            </el-popover>
            {{ row.code}}
          </template>
        </el-table-column>
  </el-table>
    cellStyle({ rowIndex }) {
      const rowsToHighlight = []
      this.list.forEach((item, index) => {
        if (item.error) {
          rowsToHighlight.push(index)
        }
      })
      if (rowsToHighlight.includes(rowIndex)) {
        return 'color: #F59A23;'
      }
      return ''
    },

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

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

相关文章

代码解读 | Hybrid Transformers for Music Source Separation[06]

一、背景 0、Hybrid Transformer 论文解读 1、代码复现|Demucs Music Source Separation_demucs架构原理-CSDN博客 2、Hybrid Transformer 各个模块对应的代码具体在工程的哪个地方 3、Hybrid Transformer 各个模块的底层到底是个啥&#xff08;初步感受&#xff09;&#xff1…

Doris连接超时问题排查记录

文章目录 一、现象描述二、问题排查1、分析驱动包2、分析Mysql客户端&#xff08;问题解决&#xff09; 一、现象描述 先上官网部署地址&#xff0c;按照官网上一步步进行部署 https://doris.apache.org/zh-CN/docs/get-starting/quick-start 基本到最后都挺顺利的&#xff0c…

STM32学习笔记(四)--TIM定时器中断详解

&#xff08;1&#xff09;配置步骤1.配置RCC外设时钟2.配置时基单元的时钟3.配置初始化时基单元4.使能更新中断5.配置NVIC 选择一个合适的优先级6.启动定时器 其中涉及外设有 RCC内部时钟&#xff08;EIR外部时钟 ITR其他定时器 TIx捕获通道&#xff09;、TIM、NVIC 高级定时器…

大模型赛道有前景吗?普通人该如何入门大模型?(附AI大模型资源)

大模型赛道有前景吗&#xff1f; 这个问题&#xff0c;是个热门话题&#xff0c;但不是个好问题。 因为&#xff0c;它基于不同的提问人、提问意图&#xff0c;会有不同的答案。 对于一个职业发展初期的新人&#xff0c;提问的意图可能是&#xff1a;我要不要转行去大模型赛…

【VS】尚未配置为Web项目XXXX指定的本地IIS URL HTTP://localhost

报错原因&#xff1a; 我们在Web项目的属性配置中勾选了“使用本地IIS Web服务器”&#xff1b; 本来嘛&#xff0c;这也没啥&#xff0c;问题是当我们的电脑IP改变时&#xff0c;将会导致程序找不到原来的IP地址了&#xff0c;那么当然会报错啦。 解决办法&#xff1a; 其实…

南方cass专业测绘软件下载,南方cass功能强大的cad辅助测绘软件获取!

在测绘领域&#xff0c;南方CASS测绘软件无疑是一颗璀璨的明星&#xff0c;被誉为“全能选手”。这款软件在功能方面表现出了令人赞叹的多样性和专业性&#xff0c;为测绘工作提供了极大的便利。 ​ 首先&#xff0c;南方CASS测绘软件具备强大的数据兼容性&#xff0c;支持多种…

Blender:渲染输出

渲染输出界面 渲染设置界面&#xff1a; 输出设置界面&#xff1a; 输出文件格式 【文档】 视频导出格式&#xff1a; AVI JPEG 使用JPEG压缩的AVI。有损&#xff0c;能得到更小的文件&#xff0c;但大小无法与编解码器的压缩算法得到的文件相比。JPEG 压缩也是数字摄像机使用…

Vue3项目中Pinia使用详解

开篇 本文的目的是创建一个使用typescript的vue3项目&#xff0c;并使用pinia来管理状态。 详细步骤 创建项目 创建vue3项目&#xff0c;并使用vite作为打包工具 npm create vitelatest vue3_pinia // 选择vue,随后选择typesript进入项目&#xff0c;并按照依赖包 cd vue3_…

适用VS2019尝试生成跨平台的动态库

文章目录 1、2、步骤2.1 创建一个CMake项目2.2 写一个简单的计算加法的函数2.3 调整CMakeLists.txt2.4 Windows下编译x86的库2.4.1 配置x86-release2.4.2 选择启动项2.4.3 生成动态库 2.5 linux下编译动态库2.5.1 参考2.4.1设置Linux-GCC-Release配置X642.5.2 配置远程linux计算…

r语言数据分析案例25-基于向量自回归模型的标准普尔 500 指数长期预测与机制分析

一、背景介绍 2007 年的全球经济危机深刻改变了世界经济格局&#xff0c;引发了一系列连锁反应&#xff0c;波及各大洲。经济增长停滞不前&#xff0c;甚至在某些情况下出现负增长&#xff0c;给出口导向型发展中国家带来了不确定性。实体经济受到的冲击尤为严重&#xff0c;生…

Python学习笔记8:入门知识(八)

前言 本篇是元组的知识点学习以及知识点的补充 元组 概念 不可变的列表&#xff0c;叫做元组。 在之前列表的特性中&#xff0c;我们就说过列表是可变的&#xff0c;但是在实际使用过程中&#xff0c;我们有时候仍然需要一系列不可变的元素&#xff0c;这个时候就需要元组出…

每日5题Day24 - LeetCode 116 - 120

每一步向前都是向自己的梦想更近一步&#xff0c;坚持不懈&#xff0c;勇往直前&#xff01; 第一题&#xff1a;116. 填充每个节点的下一个右侧节点指针 - 力扣&#xff08;LeetCode&#xff09; /* // Definition for a Node. class Node {public int val;public Node left;…

万字长文爆肝Spring(一)

Spring_day01 今日目标 掌握Spring相关概念完成IOC/DI的入门案例编写掌握IOC的相关配置与使用掌握DI的相关配置与使用 1&#xff0c;课程介绍 对于一门新技术&#xff0c;我们需要从为什么要学、学什么以及怎么学这三个方向入手来学习。那对于Spring来说: 1.1 为什么要学? …

the histogram of cross-entropy loss values 交叉熵损失值的直方图以及cross-entropy loss交叉熵损失

交叉熵损失值的直方图在机器学习和深度学习中有几个重要的作用和用途&#xff1a; 评估模型性能: 直方图可以帮助评估模型在训练数据和测试数据上的性能。通过观察损失值的分布&#xff0c;可以了解模型在不同数据集上的表现情况。例如&#xff0c;损失值分布的形状和范围可以反…

2024 Idea最新激活码

idea的激活与安装 操作如下&#xff1a; ① 打开网站&#xff1a;https://web.52shizhan.cn 切换到&#xff1a;激活码&#xff0c;点击获取 ② 这个时候就跳转到现成账号页面&#xff0c;点击获取体验号&#xff0c;如图 ③ 来到了获取现成账号的页面了。输入你的邮箱账号即…

uni app 自定义 带popup弹窗的input组件

工作需要。自定义了个带popup弹窗的input组件。此组件满足个人需求&#xff0c;不喜勿喷。应该可以看明白怎么回事&#xff0c;也能自己改改&#xff0c;所以就不要联系了&#xff0c;点赞收藏就好 <template><view class"dialog_main"><input v-mod…

【第七篇】SpringSecurity核心组件和核心过滤器

一、SpringSecurity中的核心组件 在SpringSecurity中的jar分为4个,作用分别为 jar作用spring-security-coreSpringSecurity的核心jar包,认证和授权的核心代码都在这里面spring-security-config如果使用SpringSecurity XML命名空间进行配置或者SpringSecurity的<br />J…

Python 使用 Tkinter库 设置 tkinter ttk 框架的背景颜色

Tkinter 设置 tkinter ttk 框架的背景颜色 在本文中&#xff0c;我们将介绍如何使用 Tkinter 在 tkinter ttk 框架中设置背景颜色。Tkinter 是 Python 中常用的 GUI 工具包&#xff0c;ttk 则是 Tkinter 中的一个模块&#xff0c;提供了一套更加现代化的控件。 Tkinter 简介 …

ESP32基础应用之esp32连接腾讯云并使用微信小程序控制的智能灯

文章目录 1. 项目简介1.1 功能接收1.2 使用资源1.3 测试平台 2 腾讯云物联网开发平台3 esp32设备开发3.1 准备参考例程3.2 vscode平台创建测试工程3.3 修改工程 问题总结使用PowerShell命令行终端生成的二维码不能用 1. 项目简介 1.1 功能接收 实现腾讯云创建项目与设备&…