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

Vue结合ElementUi修改<el-table>表格的背景颜色和表头样式

  本项目在开发过程中vue+elementui , 页面中使用了table表格的样式,  需要对原先的样式进行修改,以下是简单的修改样式内容:
		项目中某个 html中引用的table表格内容,定义了div的class : device_err :<div class="device_err"><el-table size="small" :header-cell-style="{color: '#ffffff',fontSize: '14px', backgroundColor: '#011946'}":data="tableData"style="width: 98%"height="195">........</el-table><div>

修改table的表头背景 和 字体颜色:

 :header-cell-style="{color: '#ffffff',fontSize: '14px', backgroundColor: '#011946'}"

以下是修改el-table表格内容的背景色和边框样式:

/*设置table表格中每行的背景色 及 显示的字体颜色*/
.device_err .el-table tr {background-color: #011946 !important;color: #ffffff;font-weight: bold;
}/*.device_err  .el-table--enable-row-transition .el-table__body td, .el-table .cell {background-color: transparent;
}*//* 去除表格线 */
.device_err .el-table__row > td {border: none;
}/* 去除上边框 */
.device_err .el-table th.is-leaf {border: none;
}/* 去除下边框 */
.device_err .el-table::before {height: 0;
}/**
隐藏el-table的header的滚动条*/
.device_err .el-table__header .gutter {background-color: #011946 !important;
}/*隐藏el-table的body的y轴滚动条*/
.device_err .el-table--scrollable-y .el-table__body-wrapper {background-color: #011946 !important;
}.device_err .el-table__body-wrapper::-webkit-scrollbar {width: 0; /*滚动条宽度*/
}/*鼠标滑过td上作用的样式,ie6不支持:hover伪类属性,如果是ie6要写成tr.over样式*/
.device_err .el-table tbody tr:hover > td {background-color: #015476 !important;
}我看到有些百度人说了是使用::deep  和 /deep/  或者>>>但是我使用了没效果. 苦笑 专业的事情还是需要专业的人来干, 我对前端也是不咋地 .来自一个渺小后端开发的努力.

相关文章:

Vue结合ElementUi修改<el-table>表格的背景颜色和表头样式

本项目在开发过程中vueelementui &#xff0c; 页面中使用了table表格的样式&#xff0c; 需要对原先的样式进行修改&#xff0c;以下是简单的修改样式内容&#xff1a;项目中某个 html中引用的table表格内容,定义了div的class : device_err :<div class"device_err&q…...

git clone与git pull区别

从字面意思也可以理解&#xff0c;都是往下拉代码&#xff0c;git clone是克隆&#xff0c;git pull 是拉。 但是&#xff0c;也有区别&#xff1a; 从远程服务器克隆一个一模一样的版本库到本地, 复制的是整个版本库&#xff0c;叫做clone.&#xff08;clone是将一个库复制到你…...

MyBatis学习简要

目录 什么是MyBatis? MyBatis实现的设想 MyBatis基于配置文件的开发步骤 mybatis的配置文件 Mapper代理开发 配置文件完成增删改查的三步 注解开发 一、条件查询 参数接收时&#xff0c;参数的设置&#xff1a; 动态条件查询&#xff1a; 二、添加功能 步骤&#xf…...

forlium 笔记 Map

用于创建交互式地图 1 主要参数 1.1. location 地图位置 地图的经纬度 import foliumm folium.Map(location[31.186358, 121.510256],zoom_start15)m 1.2 tiles 内置样式 默认是OpenStreetMap 1.2.1 Stamen Terrain 它强调了地形特征&#xff0c;如山脉、河流和道路 m …...

解读亚马逊云科技语义搜图检索方案

图像检索&#xff08;包括文搜图和图搜图&#xff09;是各个行业中常见的一个应用场景。比如在电商场景中&#xff0c;基于以图搜图做相似商品查找&#xff1b;在云相册场景中&#xff0c;基于文搜图来找寻所需的图像素材。 传统基于标签的图像检索方式&#xff0c;即先使用目标…...

git基本使用

1、创建仓库&#xff0c;提交代码 Git 全局设置&#xff1a; git config --global user.name "许歌" //全局绑定用户名 git config --global user.email "12075507xu-ge111user.noreply.gitee.com" //全局绑定邮箱创建 git 仓库&#xff1a; mkdir t…...

为C# Console应用化个妆

说到Windows的cmd&#xff0c;刻板印象就是黑底白字的命令行界面。跟Linux花花绿绿的界面比&#xff0c;似乎单调了许多。但其实C#开发的Console应用也可以摆脱单调非黑即白的UI。 最近遇到个需求&#xff0c;要在一堆纯文本文件里找指定的关键字&#xff08;后续还要人肉判断…...

VUE环境下 CSS3+JS 实现发牌 翻牌

创建牌容器&#xff08;关键点&#xff1a;overflow&#xff1a;hidden&#xff09;&#xff1a; <div class"popup-box"></div> .popup-box {position: absolute;width: 100vw;height: 100vh;top: 0px;left: 0;overflow: hidden; } 创建每一张牌《固…...

WSL Opencv with_ffmpeg conan1.60.0

我是ubuntu18. self.options[“opencv”].with_ffmpeg True 关键是gcc版本需要conan支持&#xff0c;比如我的是&#xff1a; compilergcc compiler.version7.5 此外还需要安装系统所需库&#xff1a; https://qq742971636.blog.csdn.net/article/details/132559789 甚至来…...

Android中正确使用Handler的姿势

在Android中&#xff0c;Handler是一种用于在不同线程之间传递消息和任务的机制。以下是在Android中正确使用Handler的一些姿势&#xff1a; 1. 在主线程中创建Handler对象 在Android中&#xff0c;只有主线程&#xff08;也称为UI线程&#xff09;可以更新UI。因此&#xff…...

webSocket前后端交互pc端版

前端代码 <!--* Author: 第一好帅宝* Date: 2023-08-29 16:12:26* LastEditTime: 2023-08-29 16:54:50* FilePath: \websocket\ceshi.html --> <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name&…...

Java-day13(枚举与注解)

枚举与注解 枚举 1.自定义枚举 如果枚举只有单个成员&#xff0c;则可以作为单例模式的实现方式 public class test{ public static void main(String[] args) { Season spring Season.spring;System.out.println(spring);spring.show();System.out.println(…...

vue PDF或Word转换为HTML并保留原有样式

方法一 要将PDF或Word转换为HTML并保留原有样式&#xff0c;可以使用pdfjs-dist和mammoth.js这两个库。首先需要安装这两个库&#xff1a; npm install pdfjs-dist mammoth.js然后在Vue项目中使用这两个库进行转换&#xff1a; import * as pdfjsLib from pdfjs-dist; impor…...

华硕笔记本摄像头倒置怎么办?华硕笔记本摄像头上下颠倒怎么调整

笔记本电脑相较于台式电脑&#xff0c;更易携带&#xff0c;解决了很大一部分人的使用需求。但是笔记本电脑也存在很多不足&#xff0c;比如华硕笔记本电脑就经常会出现摄像头倒置的错误&#xff0c;出现这种问题要如何修复呢&#xff1f;下面就来看看详细的调整方法。 华硕笔记…...

本地套接字通信

1.本地套接字 本地套接字的作用&#xff1a;本地的进程间通信 有关系的进程间的通信 没有关系的进程间的通信 本地套接字实现流程和网络套接字类似&#xff0c;一般采用TCP的通信流程 2.本地套接字通信的流程 - tcp // 服务器端 1.创建监听的套接字int lfd socket(AF_U…...

数据结构(Java实现)-优先级队列(堆)

队列是一种先进先出(FIFO)的数据结构&#xff0c;但有些情况下&#xff0c;操作的数据可能带有优先级&#xff0c;一般出队 列在这种情况下&#xff0c;数据结构应该提供两个最基本的操作&#xff0c;一个是返回最高优先级对象&#xff0c;一个是添加新的对象。 这种数据结构就…...

算法通关村第8关【黄金】| 寻找祖先问题

思路&#xff1a;递归三部曲 第一步&#xff1a;确定参数和返回值 题目要求找到指定的结点&#xff0c;就需要返回结点。 题目又涉及到p,q就需要传入p,q&#xff0c;需要遍历传入root 第二步&#xff1a;确定终止条件 当遍历到结点为空说明到底没找到返回空 或者遍历到p,…...

栈和队列(详解)

一、栈 1.1、栈的基本概念 1.1.1、栈的定义 栈&#xff08;Stack&#xff09;&#xff1a;是只允许在一端进行插入或删除的线性表。首先栈是一种线性表&#xff0c;但限定这种线性表只能在某一端进行插入和删除操作。 栈顶&#xff08;Top&#xff09;&#xff1a;线性表允许…...

iOS开发Swift-3-UI与按钮Button-摇骰子App

1.创建新项目Dice 2.图标 删去AppIcon&#xff0c;将解压后的AppIcon.appiconset文件拖入Assets包。 3.将素材点数1-6通过网页制作成2x&#xff0c;3x版本并拖入Asset。 4.设置对应的UI。 5.拖入Button组件并设置style。 6.Ctrl加拖拽将Button拖拽到ViewController里&#xff0…...

1、[春秋云镜]CVE-2022-32991

文章目录 一、相关信息二、解题思路&#xff08;手注&#xff09;三、通关思路&#xff08;sqlmap&#xff09; 一、相关信息 靶场提示&#xff1a;该CMS的welcome.php中存在SQL注入攻击。 NVD关于漏洞的描述&#xff1a; 注入点不仅在eid处&#xff01;&#xff01;&#xff…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

python可视化:俄乌战争时间线关键节点与深层原因

俄乌战争时间线可视化分析&#xff1a;关键节点与深层原因 俄乌战争是21世纪欧洲最具影响力的地缘政治冲突之一&#xff0c;自2022年2月爆发以来已持续超过3年。 本文将通过Python可视化工具&#xff0c;系统分析这场战争的时间线、关键节点及其背后的深层原因&#xff0c;全面…...

C++ Saucer 编写Windows桌面应用

文章目录 一、背景二、Saucer 简介核心特性典型应用场景 三、生成自己的项目四、以Win32项目方式构建Win32项目禁用最大化按钮 五、总结 一、背景 使用Saucer框架&#xff0c;开发Windows桌面应用&#xff0c;把一个html页面作为GUI设计放到Saucer里&#xff0c;隐藏掉运行时弹…...

[10-1]I2C通信协议 江协科技学习笔记(17个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17...

ubuntu2404 gpu 没接显示器,如何保证远程显示的分辨率

1. 使用 xserver-xorg-video-dummy 创建虚拟显示器 如果系统在无物理显示器连接时无法识别显示输出&#xff0c;可以使用 xserver-xorg-video-dummy 驱动程序创建虚拟显示器。以下是设置步骤&#xff1a; 安装虚拟显示器驱动程序&#xff1a; sudo apt install xserver-xorg-v…...