ElementUi中el-table组件使用row-class-name修改指定行颜色

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。

注意:如果在el-table中使用了stripe这个属性,这个属性是带斑马纹的表格样式,它和row-class-name共存时是没有效果。
注意:如果在el-table中使用了stripe这个属性,这个属性是带斑马纹的表格样式,它和row-class-name共存时是没有效果。
注意:如果在el-table中使用了stripe这个属性,这个属性是带斑马纹的表格样式,它和row-class-name共存时是没有效果。

这个确实要说三遍,很多人设置了不生效的原因就是这个。
使用scoped设置了样式作用域 ,这个会影响到class的样式

可以尝试使用/deep/深度选择器,必须在sass或less下

/deep/ .el-table .warning-row {background: oldlace;}/deep/ .el-table .success-row {background: #f0f9eb;}

使用 >>>深度选择器,只支持css

.el-table >>> .warning-row {background: oldlace;}.el-table >>> .success-row {background: #f0f9eb;}

下面的就是官网的例子

<template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template>
<style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
</style><script>export default {methods: {tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}}}
</script>

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

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

相关文章

【微信开发】微信支付前期准备工作(申请及配置)

1、申请并配置公众号或微信小程序 1.1 账户申请 通过微信公众平台&#xff0c;根据指引申请微信小程序或公众号&#xff0c;申请时需要微信认证&#xff0c;申请流程不在赘述 1.2 信息配置 申请通过后&#xff0c;需进入小程序和公众号内进行信息配置 1.2.1 小程序信息配置…

Mac YOLO V9推理测试(基于ultralytics)

环境&#xff1a; Mac M1 (MacOS Sonoma 14.3.1) Python 3.11PyTorch 2.1.2 一、准备工作 使用YOLO一般都会接触ultralytics这个框架&#xff0c;今天来试试用该框架进行YOLO V9模型的推理。 YOLOv9目前提供了四种模型下载&#xff1a;yolov9-c.pt、yolov9-e.pt、gelan-c.p…

lint 代码规范,手动修复,以及vscode的第三方插件eslint自动修复

ESlint代码规范 不是语法规范&#xff0c;是一种书写风格&#xff0c;加多少空格&#xff0c;缩进多少&#xff0c;加不加分号&#xff0c;类似于书信的写作格式 ESLint:是一个代码检查工具&#xff0c;用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)…

【管理篇】如何横向沟通?

目录标题 什么是横向沟通&#xff1f;常见沟通问题 如何处理横向沟通中的问题&#xff1f; 什么是横向沟通&#xff1f; 所谓横向沟通&#xff0c;就是和没有直接汇报关系的合作方之间的沟通&#xff0c;指的是与平级间进行的与完成工作有关的交流&#xff1b;横向沟通核心的挑…

mqtt定时脚本

需求描述 给mqtt的topic发送信息 对应的topic接收请求后&#xff0c;执行发送短信指令 信息内容 SMS,10086,102 lua的mqtt里面&#xff0c;截取判断即可 –>可以实现 定时任务&#xff0c; 每月开机一次 发短信&#xff1f; 或者使用开机通知&#xff1f; 定时消费…

Npm Install Docusaurus Demo【npm 安装 docusaurus 实践 】

文章目录 1. 简介2. 前提2.1 安装 git2.2 安装 node 3. 安装4. 项目结构5. 访问5.1 localhost 访问5.2 ip 访问 1. 简介 Docusaurus 是一个facebook的开源项目&#xff0c;旨在帮助开发者构建易于维护和部署的文档网站。它提供了一个简单的方法来创建专业的文档网站&#xff0…

共享旅游卡免费旅游真实反馈,有图有真相?

新伙伴体验&#xff0c;云南昆大丽6天5晚品质双人游&#xff0c;真实反馈&#xff01;珠海伙伴蔡总&#xff0c;加入千益畅行共享旅游卡团队&#xff0c;自己亲自体验“云南昆大丽6天5晚品质双人游”真实反馈&#xff0c;分享全程内容截图&#xff0c;无半点虚假&#xff01; …

2024-05-08 postgres-调试及分析-记录

摘要: 2024-05-08 postgres-调试及分析-记录 DDL: 创建库表及插入数据&#xff1a; create database d1;\c d1;create table t1( a int, b int ); create table t2( a int, b int );insert into t1(a,b) values(3,4); insert into t1(a,b) values(5,6);insert into t2(a,b) va…

MongoDB聚合运算符:$trim

MongoDB聚合运算符&#xff1a;$trim 文章目录 MongoDB聚合运算符&#xff1a;$trim语法使用空白字符 举例 $trim用来删除字符串开头和结尾的空白字符&#xff08;包括空值&#xff09;或指定字符。 语法 { $trim: { input: <string>, chars: <string> } }input&…

react经验15:拖拽排序组件dnd-kit的使用经验

应用场景 列表中的成员可鼠标拖拽改变顺序 实施步骤 前置引入 import type { DragEndEvent } from dnd-kit/core import { DndContext } from dnd-kit/core import {arrayMove,/*垂直列表使用verticalListSortingStrategy,横向列表使用horizontalListSortingStrategy*/vert…

springboot引入security,测试接口报Unauthorized

1、报错截图 2、当前项目pom文件引入security <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-security</artifactId><version>2.2.2.RELEASE</version> </dependency> 3、解决…

数据结构之图——探索图论的奥秘

前言 在这篇文章中&#xff0c;我们一起来看看我们生活中都会用到&#xff0c;但却不那么熟悉的数据结构——图&#xff08;英语&#xff1a;graph&#xff09;。我们看下百科定义&#xff1a; 在计算机科学中&#xff0c;图&#xff08;英语&#xff1a;graph&#xff09;是一…

计算机毕业设计 | vue+springboot汽车销售管理系统(附源码)

1&#xff0c;项目介绍 本项目基于spring boot以及Vue开发&#xff0c;前端实现基于PanJiaChen所提供的开源后台项目vue-element-admin改造。 针对汽车销售提供客户信息、车辆信息、订单信息、销售人员管理、财务报表等功能&#xff0c;提供经理和销售两种角色进行管理。 2&…

某MBTI性格测试系统后台Getshell

在淘宝购买了性格测试系统源代码进行环境部署,后进行渗透测试 淘宝源码链接:https://item.taobao.com/item.htm?ftt&id790798788255 (自己学习(代码审计、算法、环境搭建)知识技能提升) 环境准备 集成环境选的是小皮 phpstudy 创建网站,将源代码放入网站根目录配置好数据…

Doris【部署 01】Linux部署MPP数据库Doris稳定版(下载+安装+连接+测试)

本次安装测试的为稳定版2.0.8官方文档 https://doris.apache.org/zh-CN/docs/2.0/get-starting/quick-start 这个简短的指南将告诉你如何下载 Doris 最新稳定版本&#xff0c;在单节点上安装并运行它&#xff0c;包括创建数据库、数据表、导入数据及查询等。 Linux部署稳定版Do…

ElasticSearch的python api以及dev tool方式的基本操作

一、环境要求 根据es服务器版本&#xff0c;下载es的python api包&#xff0c;我们这里的环境为&#xff1a; python3.8, 下载的elastic search版本为7.6.0&#xff0c;安装方式&#xff1a; pip install elasticsearch7.6.0二、es操作及python代码 1、获取es实例&#xff0…

LeetCode 每日一题 2024/5/6-2024/5/12

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 5/6 741. 摘樱桃5/7 1463. 摘樱桃 II5/8 2079. 给植物浇水5/9 2105. 给植物浇水 II5/10 2960. 统计已测试设备5/11 2391. 收集垃圾的最少总时间5/12 5/6 741. 摘樱桃 从起点…

当下是风口的热门兼职副业,月入3万问题不大,附保姆教程!

近年来&#xff0c;短视频行业呈现出迅猛的发展势头&#xff0c;已经成为当下最受欢迎的一种形式。甚至连曾经的电商巨头京东也开始积极布局这一领域&#xff0c;投入巨资20亿元进行深入耕耘。 周周近财&#xff1a;让网络小白少花冤枉钱&#xff0c;赚取第一桶金 不知道您是…

第 8 章 机器人底盘Arduino端入口(自学二刷笔记)

重要参考&#xff1a; 课程链接:https://www.bilibili.com/video/BV1Ci4y1L7ZZ 讲义链接:Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 8.4.2 底盘实现_01Arduino端入口 ros_arduino_bridge/ros_arduino_firmware/src/libraries/ROSArduinoBridge…

Android APP读写外置SD卡无权限 java.io.IOException: Permission denied

在物联网应用里&#xff0c;app需要对挂载SD卡读写文件&#xff0c;从 Android 4.4&#xff08;KitKat&#xff09;版本开始&#xff0c;Google 引入了一项名为 "Storage Access Framework" 的新功能&#xff0c;该功能限制了应用对外部存储的直接读写权限,要不然就是…