element plus中修改el-table的样式

文章目录

  • 前情提要
    • 相关环境
    • package.json
    • vue代码
    • 结果
  • 方式一
    • 直接看代码
  • 方式二
    • 直接看代码

前情提要

因为项目中用到el-table的时候,需要将el-table表格的样式进行修改,将整个表格的背景颜色从白色变成透明,使得表格变得透明之后,展示颜色是对应父div的背景颜色,这个在可视化大屏的时候或许会经常用到。修改表格悬浮时的颜色,修改表格点击行高亮的颜色样式。在这里记录一下,方便后面直接使用到。这里记录一下,方便下次直接使用到。这里有两种方式,不过都是通过深度选择器进行配置的,避免影响到其他系统使用el-table时的样式。如下所示,假设父div的背景颜色为粉色,el-table默认的样式如下所示:

相关环境

项目使用的是vite+vue3+element plus。下面有两种方式都可以,建议使用方式二。

package.json

{"name": "smart_mining_vue_cesium","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"element-plus": "^2.8.4","vue": "^3.4.37","vue-router": "^4.4.5"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.2","cesium": "^1.121.1","vite": "^5.4.7","vite-plugin-cesium": "^1.2.23"}
}

vue代码

<template><div style="width: 800px; height: 600px; background-color: pink;"><!-- highlight-current-row 为选中高亮当前点击的行 --><el-table :data="tableData" highlight-current-row style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script setup>
import { ref } from 'vue';const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '张三',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '李四',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄'}
]);
</script><style scoped>
</style>

结果

在这里插入图片描述

从图中可以看到,表格的背景颜色为白色,鼠标悬浮颜色为灰色,点击高亮的颜色为比悬浮的颜色稍微深一点。

方式一

这个我也是通过浏览器的开发者模式中进行自己慢慢找对应的css选择器,一步一步修改得到的结果。
在这里插入图片描述

直接看代码

如果想知道对应的选择器的样式是什么,把对应的css代码注释掉就行了。

<template><div style="width: 800px; height: 600px; background-color: pink;"><!-- highlight-current-row 为选中高亮当前点击的行 --><el-table :data="tableData" highlight-current-row style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script setup>
import { ref } from 'vue';const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '张三',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '李四',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄'}
]);
</script><style scoped>:deep(.el-table) {/* 透明度为0,不显示背景色 */background-color: rgba(255, 240, 240, 0);
}/* 头部标题组件 */
:deep(.el-table th.el-table__cell) {/* 透明度为0,不显示背景色 */background-color: rgba(255, 0, 0, 0); /* 文字颜色 */color: skyblue;/* 背景图片,可以为表格头部设置背景颜色,不过如果背景是透明的,可以直接把父div的背景图片当做是这里的图片,只要把表格放在对应的位置就行了,看自己选择 *//* background-image: url("https://element-plus.org/images/element-plus-logo.svg"); */
}/* 头部与body下面的分割线 */
:deep(.el-table th.el-table__cell.is-leaf) {border-bottom: none;
}/* 表格行背景色 */
:deep(.el-table tr) {/* 透明度为0,不显示背景色 */background-color: rgba(255, 0, 0, 0); /* 文字颜色 */color: aquamarine;
}/* 表格行之间的分割线 */
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {border-bottom: none;
}/* 表格底部分割线,不知道表达的是什么,注释一下这个就知道了  */
:deep(.el-table__inner-wrapper:before) {bottom: 0;height: 0px;left: 0;
}/* 鼠标悬停背景色 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {background-color: rgba(116, 85, 228, 0.671);
}/* 鼠标选中背景色,行点击事件 */
:deep(.el-table__body tr.current-row>td.el-table__cell) {background-color: green;
}
</style>

结果如下所示:
在这里插入图片描述

方式二

这个我也是通过浏览器的开发者模式中进行自己慢慢找对应的css选择器,一步一步修改得到的结果。
在这里插入图片描述

直接看代码

代码如下所示

<template><div style="width: 800px; height: 600px; background-color: pink;"><!-- highlight-current-row 为选中高亮当前点击的行 --><el-table :data="tableData" highlight-current-row style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script setup>
import { ref } from 'vue';const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '张三',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '李四',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄'}
]);
</script><style scoped>
:deep(.el-table) {--el-table-border-color: var(--el-border-color-lighter);--el-table-border: 0px solid var(--el-table-border-color); /**这里改成0了 */--el-table-text-color: rgb(127, 255, 202); /**文字颜色 */--el-table-header-text-color: rgb(135, 198, 235); /**表头文字颜色 */--el-table-row-hover-bg-color: rgba(116, 85, 228, 0.671); /**行悬浮颜色 */--el-table-current-row-bg-color: rgb(0, 161, 48); /**当前行颜色 */--el-table-header-bg-color: rgba(255, 0, 0, 0); /**表头背景颜色, 透明度为0 */--el-table-fixed-box-shadow: var(--el-box-shadow-light);--el-table-bg-color: rgba(255, 0, 0, 0); /**表格背景颜色, 透明度为0 */--el-table-tr-bg-color: rgba(255, 0, 0, 0); /**表格行的背景颜色, 透明度为0 */;--el-table-expanded-cell-bg-color: var(--el-fill-color-blank);--el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);--el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);--el-table-index: var(--el-index-normal);background-color: rgba(255, 0, 0, 0); /**表格的背景颜色, 透明度为0 */;box-sizing: border-box;color: var(--el-table-text-color);font-size: 14px;height: -moz-fit-content;height: fit-content;max-width: 100%;overflow: hidden;position: relative;width: 100%;
}/* 头部标题组件 */
:deep(.el-table th.el-table__cell) {/* 背景图片,可以为表格头部设置背景颜色,不过如果背景是透明的,可以直接把父div的背景图片当做是这里的图片,只要把表格放在对应的位置就行了,看自己选择 *//* background-image: url("https://element-plus.org/images/element-plus-logo.svg"); */
}/* 表格底部分割线,不知道表达的是什么,注释一下这个就知道了  */
/* :deep(.el-table__inner-wrapper:before) {bottom: 0;height: 0px;left: 0;
} */
</style>

结果如下所示
在这里插入图片描述
打开浏览器的开发者模式可以看出
在这里插入图片描述

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

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

相关文章

【启程Golang之旅】一站式理解Go语言中的gRPC

在本文中将深入探讨如何使用Go语言构建基于gRPC的高效服务通信&#xff0c;无论你是刚刚接触gRPC还是已经有一定基础的开发者&#xff0c;这篇文章都将带你从理论到实践&#xff0c;全面理解如何借助Go和gRPC提升应用程序的性能与可维护性。 目录 初识gRPC gRPC基本使用 初识…

Ubuntu22.04安装DataEase

看到DataEase的驾驶舱&#xff0c;感觉比PowerBI要好用一点&#xff0c;于是搭建起来玩玩。Dataease推荐的操作系统是Ubuntu22.04/Centos 7。 下载了Ubuntu22.04和DataEase 最新版本的离线安装包 一.安装ubuntu22.04 在安装的时候&#xff0c;没有顺手设置IP地址信息&#xff…

IDEA加载通义灵码插件及使用指南

安装通义灵码插件 登录通义灵码IDE插件 下载登录参考教程 https://help.aliyun.com/zh/lingma/user-guide/download-the-installation-guide 本地工程和企业知识库准备 请下载本地工程和知识库压缩包&#xff0c;并在本地解压缩&#xff0c;其中包含demoProject和知识库文件…

第二届开放原子大赛-开源工业软件算法集成大赛即将启动!

第二届开放原子大赛-开源工业软件算法集成大赛作为开放原子开源基金会组织举办的开源技术领域专业赛事&#xff0c;聚焦开源底座框架平台建设&#xff0c;通过组件化集成的开发模式&#xff0c;丰富平台功能模块&#xff0c;拓展其应用场景&#xff0c;以此促进工业软件生态的繁…

帮你快速理解并巧记设计模式

经常因为记不住或不能理解设计模式而苦恼的童鞋们注意了&#xff0c;闲暇之余总结了常用的22中设计模式&#xff0c;并一一举例&#xff0c;帮助大家快速理解、牢记&#xff0c;如有不对的地方&#xff0c;欢迎大家指正哈 创建型模式 单例模式&#xff08;Singleton Pattern&…

甘肃高校大数据实验室建设案例分享

随着信息技术的快速发展&#xff0c;大数据技术已成为推动经济社会发展的重要引擎。甘肃省高度重视教育信息化建设&#xff0c;并积极支持省内高校建立大数据相关实验室&#xff0c;以促进学科交叉融合及创新人才培养。在此背景下&#xff0c;泰迪携手多所甘肃高校共同打造了一…

成都睿明智科技有限公司共赴抖音电商蓝海

在这个短视频风起云涌的时代&#xff0c;抖音作为现象级的社交媒体平台&#xff0c;不仅改变了人们的娱乐方式&#xff0c;更悄然间重塑了电商行业的格局。在这片充满机遇与挑战的蓝海中&#xff0c;成都睿明智科技有限公司凭借其敏锐的市场洞察力和专业的服务能力&#xff0c;…

【前端】JavaScript 方法速查大全-对象(二)

&#x1f525; 前言 在现代Web开发中&#xff0c;JavaScript已经成为不可或缺的编程语言。无论是前端开发还是后端服务&#xff0c;JavaScript都扮演着重要角色。为了帮助开发者更高效地使用JavaScript&#xff0c;本文将为您提供一个全面、系统的JavaScript方法参考&#xff…

右旋圆极化散射后的stocks矢量 与T3矩阵的关系

T3矩阵如下 斯托克斯与T3的关系如下。 斯托克斯与T3均没有平均处理&#xff0c;即斯托克斯是完全极化波的&#xff08;一种琼斯矢量得到&#xff09;&#xff0c;T3是由一个散射矩阵得到&#xff0c;只有一个特征值。

电子电气架构 -- 智能汽车电子电气架构开发关键技术

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所有人的看法和评价都是暂时的,只有自己的经历是伴随一生的,几乎所有的担忧和畏惧,都是来源于自己的想象,只有你真的去做了,才会发现有多快乐。…

Windows下mysql数据库备份策略

Windows下mysql的增量备份和全量备份&#xff0c;并利用schtasks设置定时任务执行bat脚本。 一、备份要求 序号 备份类型 备份频次 备份时间 1 增量备份 每周一-每周六各一次 18:00:00 2 全量备份 每周日一次 18:00:00 二、备份方法 2.1增量备份 2.1.1准备工作…

使用CentOS宝塔面板docker搭建EasyTier内网穿透服务

0. 前言 EasyTier是一个简单、安全、去中心化的内网穿透 VPN 组网方案&#xff0c;部署方便&#xff0c;支持 MacOS/Linux/Windows/FreeBSD/Android平台&#xff0c;而且作者搭建了一个公共服务器&#xff0c;不想折腾自建服务&#xff0c;可以使用默认的公共服务器地址 tcp:/…

Moment.js、Day.js、Miment,日期时间库怎么选?

一直以来&#xff0c;处理时间和日期的JavaScript库&#xff0c;选用的都是Momment.js。它的API清晰简单&#xff0c;使用方便灵巧&#xff0c;功能还特别齐全。 大师兄是Moment.js的重度使用者。凡是遇到时间和日期的操作&#xff0c;就把Moment.js引用上。 直到有天我发现加…

AOSP去特征|AOSP导入android-studio|AOSP导入clion

什么是AOSP 开源性&#xff1a;AOSP的源代码公开&#xff0c;任何人都可以获取和修改&#xff0c;适合想要开发或自定义安卓系统的开发者。 灵活性&#xff1a;AOSP提供了基本的安卓功能&#xff0c;制造商可以基于AOSP开发出自己的定制系统&#xff08;如三星的One UI、小米的…

JavaScript 网页设计详解教程

JavaScript 网页设计详解教程 引言 JavaScript 是一种广泛使用的编程语言&#xff0c;主要用于网页开发。它使得网页具有动态交互性&#xff0c;能够响应用户的操作。随着前端开发的不断发展&#xff0c;JavaScript 已成为现代网页设计中不可或缺的一部分。本文将详细介绍 Ja…

Android关机流程知多少?

在 Android 中&#xff0c;关机流程涉及系统各个组件的协同工作&#xff0c;确保设备在断电之前能够安全地关闭所有活动并保存数据。以下是 Android 系统中关机流程的详细介绍&#xff1a; 1. 用户触发关机请求 关机流程由用户的操作触发&#xff0c;通常有以下几种方式&#…

【Mac】PD报错:无法为“Windows” 完成操作,虚拟机ID无效的解决办法

Parallels Desktop是Mac上一款非常常用的虚拟机软件&#xff0c;但是在使用过程中&#xff0c;可能会遇到一些问题不知道如何处理。比如有时会遇到PD报错&#xff1a;无法为“Windows 11”完成操作&#xff0c;虚拟机ID无效。 错误原因 电脑上安装过虚拟机&#xff0c;虚拟机被…

51c大模型~合集17

我自己的原文哦~ https://blog.51cto.com/whaosoft/11599989 #关于大模型「越狱」的多种方式 此项目是由伊利诺伊大学香槟分校&#xff08;UIUC&#xff09;的汪浩瀚教授主导&#xff0c;汇集了多名intern的共同努力而成。长久以来&#xff0c;这个跨学科的团队一直在前沿科…

一:时序数据库-Influx应用

目录 0、版本号 1、登录页面 2、账号基本信息 3、数据库案例 4、可视化 5、java案例 0、版本号 InfluxDB v2.4.0 1、登录页面 http://127.0.0.1:8086/signin 账号&#xff1a;自己账号 密码&#xff1a;自己密码 2、账号基本信息 查看用户id和组织id&#xff01;&…

Uefi Application小游戏开发之贪吃蛇

这段代码是一个 UEFI 应用程序&#xff0c;它实现了一个简单的贪吃蛇游戏。 #include <Uefi.h> #include <Library/UefiLib.h> #include <Library/ShellCEntryLib.h> #include <Library/UefiBootServicesTableLib.h> #include <Library/UefiRuntim…