element-plus 表格-自定义样式实现2


<template><h2>表格修改样式利用属性修改</h2><h3>row-style 行样式</h3><h3>row-style header-row-style 不能改背景色</h3><h3>cell-style header-cell-style能改背景色</h3><el-tableref="tableRef":data="tableData"borderstyle="width: 100%"highlight-current-rowheight="200":row-style="rowState":cell-style="cellState":header-row-style="headerRowState":header-cell-style="headerCellState"><el-table-column type="index" label="序号" width="100" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table><div>测试2================</div><h3>header-row-class-name 不能改背景色</h3><h3>header-cell-class-name能改背景色</h3><el-table:data="tableData"borderstyle="width: 100%"highlight-current-rowheight="200"header-row-class-name="myHeaderClass"header-cell-class-name="myHeaderCellClass"row-class-name="myRowClass"cell-class-name="myCellClass"><el-table-column type="index" label="序号" width="100" /><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table>
</template><script lang="ts" setup >
import { getCurrentInstance, onMounted, reactive, ref, inject } from "vue";const install = getCurrentInstance();
const tableRef = ref();
const tableData = reactive<any>([]);const allDableData = reactive<any>([]);const pageSize4 = ref(10);
const currentPage4 = ref(1);onMounted(() => {for (let i = 0; i < 100; i++) {let obj = {date: "2016-05-01",name: "Tom" + i,address: "No. 189, Grove St, Los Angeles",color_index: i,};allDableData.push(obj);}tableData.push(...allDableData.slice(currentPage4.value - 1, pageSize4.value));
});function rowState({ row }) {let style = {};//console.log(row.color_index)switch (row.color_index % 4) {case 0:style = {backgroundColor: "red",color: "white",};break;case 1:style = {backgroundColor: "blue",};break;case 2:style = {backgroundColor: "purple",};break;}return style;
}function cellState(row) {// row, column, rowIndex, columnIndex//console.log(row.rowIndex,row.columnIndex)let style = { backgroundColor: "rgb(16, 95, 95)", color: "blueviolet" };if (row.columnIndex == 1) {return style;}
}function headerRowState(item) {//  row, column, rowIndex, columnIndex//console.log("不能改背景,需要利用header-cell-style")return { backgroundColor: "rgb(160, 950, 950)", color: "blueviolet" };
}function headerCellState(item) {return { backgroundColor: "rgb(160, 950, 950)", color: "blueviolet" };
}
</script> <style >
.myHeaderClass {background-color: rgb(16, 95, 95) !important;color: blueviolet;
}
.myHeaderCellClass {background-color: rgb(16, 95, 95) !important;
}.myRowClass {background-color: rgb(16, 95, 95);color: rgb(203, 184, 221);
}
.myCellClass {background-color: rgb(16, 95, 95);
}/* 表格整体背景色 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {/* background-color: transparent !important;*/background-color: rgb(16, 95, 95);
}/* 表格内tr背景色修改 */
::v-deep .el-table tr {background-color: rgb(16, 95, 95) !important;border: 0;/* 设置字体大小 */font-size: 14px;
}/*表格内td背景色修改*/
::v-deep .el-table td {background-color: rgb(16, 95, 95) !important;border: 0;/* 设置字体大小 */font-size: 14px;
}::v-deep .current-row {/* 选中时的图片显示 */background: rgb(16, 95, 95);background-size: 100% 100% !important;
}/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {background-color: rgb(66, 11, 11) !important;/* color: #f19944; */ /* 设置文字颜色,可以选择不设置 */
}
</style>

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

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

相关文章

低调而无为而治,藏在超级应用背后的道家哲学

众所周知&#xff0c;Elon Musk 想将 Twitter 重新设计定位成一款“超级应用 - X”的野心已经不再是秘密。伴随着应用商店中 Twitter 标志性的蓝鸟 Logo 被 X 取代后&#xff0c;赛博世界充满了对这件事情各种角度的探讨与分析。 Musk 曾经无数次通过微信这一样本来推广他的“超…

【广州华锐互动】利用VR开展建筑塔吊安全操作学习的好处?

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐渗透到各个领域&#xff0c;为人们的生活带来了前所未有的便利。在工程教育领域&#xff0c;VR建筑塔吊安全操作学习作为一种新型的教学手段&#xff0c;正逐渐成为提高教学质量和培养高素质工程…

mysql 启动报错 Can t change dir to xxx, No such file or directory 配置错误或挂载导致

省流&#xff1a; 挂载的话&#xff0c;使用 /etc/fstab 正文&#xff1a; 在企业中&#xff0c;服务器重启&#xff0c;有时候会遇到mysql 启动报错 Cant change dir to xxx, No such file or directory。大致意思是无法将目录换成xxx&#xff0c;因为没有这个目录。 原因…

electron学习笔记

electron&#xff1a;大前端背景下&#xff0c;用node.js做桌面端app的工具 1、安装&#xff1a;npm i electron 实际上是chromium Node.js 2、创建一个窗口 3、主进程&#xff08;操作硬件等&#xff0c;commonJS&#xff09;与渲染进程&#xff08;渲染页面&#xff0c;E…

2023年中国OK镜市场发展前景分析:OK镜市场发展空间潜力巨大[图]

角膜接触镜是戴在眼角膜上的特殊镜片。角膜接触镜分为硬镜和软镜&#xff0c;软镜即大众常见的“隐形眼镜”&#xff1b;硬镜材质较硬&#xff0c;舒适度略低于软镜&#xff0c;硬镜主要分为OK镜、硬性角膜接触镜和巩膜镜三类。 角膜接触镜分类 资料来源&#xff1a;共研产业咨…

Spring篇---第六篇

系列文章目录 文章目录 系列文章目录一、Spring 框架中的单例 Bean 是线程安全的么?二、Spring 是怎么解决循环依赖的?三、说说事务的隔离级别一、Spring 框架中的单例 Bean 是线程安全的么? Spring 框架并没有对单例 Bean 进行任何多线程的封装处理。 关于单例 Bean 的线程…

分布式和微服务

问题分析&#xff1a; 简单来说&#xff0c;分布式是一组通过网络进行通信&#xff0c;并且为了完成共同的计算任务的计算机节点组 成的系统。 分布式系统的设计理念&#xff0c;其实是来自于小型机或者大型机的计算能力的瓶颈和成本的 增加。 在集中式系统里面&#xff0c;要…

【C++】C++中那些有点意思,但一般也用不到的替代运算符

所谓替代运算符无非就是用其他字符或者符号代表一些预定义的运算符和符号 有如下代码 int main(int x, char**) { }如果用替代用算符表示的话 int main(int x, char**) <% %>就是这样&#xff0c;花括号可以替换成了为<% %>,无非就是换了一个表示方法 在C到…

数字时代的探索与革新:Socks5代理的引领作用

在当今快速发展的数字时代&#xff0c;技术创新推动着社会的变革与进步。Socks5代理作为一项重要的网络技术&#xff0c;正引领着跨界电商、爬虫数据分析、企业全球化和游戏体验优化等领域的发展。本文将深入探讨Socks5代理技术在这些领域中的引领作用&#xff0c;以及它如何塑…

静态路由与双线BFD热备份

✍ 路由具体是什么概念&#xff1f; ✍ 路由表和路由协议有什么关系&#xff1f; ✍ 电信联通双线如何做路由热备份&#xff1f; ---- 什么叫路由&#xff1f; ---- 路由器 - 网络设备 - 转发数据 - 要有一张地图 - 路由表 ---- 路由表 - 指明要到达某个目…

竞赛选题 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 DeepSORT车辆跟踪3.1 Deep SORT多目标跟踪算法3.2 算法流程 4 YOLOV5算法4.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…

H3C的IRF堆叠互联关系说明

H3C IRF堆叠互联说明48口交换机连接方式IRF Port 两台设备第一台的51口 第二台的51口irf-port 1/2 port group interface ten-gigabitethernet 1/0/51 port group interface ten-gigabitethernet 1/0/52第一台的52口第二台的52口irf-port 2/1 port group interface ten-gigabi…

vue2技能树(2)-模板语法、vue的工具链、渐进式框架

目录 Vue2技能树Vue 2 简单的模板语法详解插值绑定属性指令v-if 和 v-elsev-forv-on 计算属性过滤器插槽 Vue 2 生态系统详解1. Vue Router2. Vuex3. Vue CLI4. Axios5. Vue Devtools6. Element UI、Vuetify、Quasar等UI框架7. Nuxt.js8. Vue Apollo、Vue Router、Vue Fire等插…

leetcode竞赛:85 场双周赛

链接&#xff1a;https://leetcode.cn/contest/biweekly-contest-85/ 日期&#xff1a;2022年08月20日 1. 定长滑动窗口 class Solution { public:int minimumRecolors(string blocks, int k) {int n blocks.size(), cnt 0, res 1000;for (int i 0, j 0; i < n; i) {w…

黑马JVM总结(三十六)

&#xff08;1&#xff09;CAS-概述 cas是配合volatile使用的技术 &#xff0c;对共享变量的安全性要使用synachonized加锁&#xff0c;但是CAS不加锁&#xff0c;它是使用where&#xff08;true&#xff09;的死循环&#xff0c;里面compareAndSwap尝试把结果赋值给共享变量&…

串口应用层程序

文章目录 注意两点&#xff1a;一、设置原始模式二、设置收到数据的最小字节数返回代码 注意两点&#xff1a; 一、设置原始模式 newtio.c_lflag & ~(ICANON | ECHO | ECHOE | ISIG); /*Input*/二、设置收到数据的最小字节数返回 tio.c_cc[VMIN] 1; /* 读数据时的最…

多模态及图像安全的探索与思考

前言 第六届中国模式识别与计算机视觉大会&#xff08;The 6th Chinese Conference on Pattern Recognition and Computer Vision, PRCV 2023&#xff09;已于近期在厦门成功举办。通过参加本次会议&#xff0c;使我有机会接触到许多来自国内外的模式识别和计算机视觉领域的研究…

[数据挖掘、数据分析] clickhouse在go语言里的实践

系列文章目录 [数据挖掘] clickhouse在go语言里的实践 [数据挖掘] 用户画像平台构建与业务实践 文章目录 系列文章目录前言一、clickhouse的起源二、OLAP/OLTP2.1、主流的OLAP/OLTP数据库 三、go语言开发实践3.1、安装配置go语言环境&#xff0c;配置IDE3.1.1、Go开发环境安装…

Scala语言入门

学习了这么久让我们来回顾一下之前的内容吧 Hadoop生态体系知识串讲 Scala编程语言 一、概述 http://scala-lang.org 专门为计算而生的语言&#xff0c;Scala将(Java后者C)面向对象设计和函数式编程结合在一起的简洁的高级编程语言。而函数式编程强调的是通过传递算子&…

【理论学习】Vision-Transformer

文章目录 1. self-attention理论1.1. Attention(Q,K,V)的实现 2. Multi-head Self-Attention理论3. Positional Encoding4. Vision Transformer 声明&#xff1a;本篇文章是我再b站观看博主霹雳吧啦Wz的视频后&#xff0c;做的一篇笔记&#xff0c;推荐大家看完视频在来简单浏览…