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

news2024/11/17 17:34:29

效果如下

代码如下



<template>
  <h2>表格自定义样式</h2>
  <div style="background-color: cadetblue; height: 600px;">
    <div class="regulaContainer">

      <el-table ref="tableRef" :data="tableData" border style="width: 100%" highlight-current-row height="400"
        :cell-style="rowStyleClass">
        <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>
  </div>
</template>

<script lang="ts" setup >
import { getCurrentInstance, onMounted, reactive, ref, inject } from 'vue'

const install = getCurrentInstance();
const tableRef = ref();
const tableData = reactive<any>([])

onMounted(() => {
  for (let i = 0; i < 5; i++) {
    let obj = {
      date: '2016-05-01',
      name: 'Tom' + i,
      address: 'No. 189, Grove St, Los Angeles',
      color_index: i
    }
    tableData.push(obj);
  }


})

function rowStyleClass(row) {
  console.log(row.rowIndex)
  let style = {};

  if (row.rowIndex % 2) {
    style = {
      color: '#fff',
      borderBottom: "1px solid #EBEEF588",
      //background: '#065D5F !important'
    };

    return style;
  }
  else {
    style = {
      color: '#fff',
      borderBottom: "1px solid #EBEEF588",
      //background: '#065D5F !important'
    };

    return style;
  }
}

</script> 


<style>
.regulaContainer {
  background-color: cadetblue;
}

/* 表格整体背景色 */
.regulaContainer .el-table,
.regulaContainer .el-table__expanded-cell {
  background-color: transparent;
}

/* 表格最下面的线 */
.regulaContainer .el-table__inner-wrapper::before {
  height: 0px;
}

.regulaContainer .el-table td.el-table__cell,
.regulaContainer .el-table th.el-table__cell.is-leaf {
  border: 0px;
}

.regulaContainer .el-table thead {
  color: #fff;
  background-color: rgb(4, 151, 145);
  border: 0;
}

.regulaContainer .el-table th {
  background: transparent;
}

/* 表格内tr背景色修改 */
.regulaContainer .el-table tr {
  background-color: transparent !important;
  border: 1px;
  /* 设置字体大小 */
  font-size: 16px;
  color: #fff;
}

/*表格内td背景色修改*/
.regulaContainer .el-table td {
  background-color: transparent !important;
  border: 1px;
  /* 设置字体大小 */
  font-size: 16px;
  color: #fff;
}

.regulaContainer .current-row {
  /* 选中时的图片显示 */
  background: rgb(26, 46, 161);
  background-size: 100% 100% !important;
}

/* 用来设置当前页面element全局table 鼠标移入某行时的背景色*/
.regulaContainer .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: rgb(60, 10, 175) !important;
  /* color: #f19944; */
  /* 设置文字颜色,可以选择不设置 */
}
</style>

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

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

相关文章

Spring 自定义注解 面向切面编程

Spring 自定义注解 JDK元注解规范 Documented -注解是否将包含在JavaDoc中 Retention -什么时候使用该注解(生命周期)RetentionPolicy.SOURCE: 在变异阶段丢弃&#xff0c;这些注解在编译结束之后就不再有任何意义&#xff0c;所以不会写入到字节码中RetentionPolicy.CLASS:…

2023年数学建模国赛A 定日镜场的优化设计思路分析

构建以新能源为主体的新型电力系统&#xff0c;是我国实现“碳达峰”“碳中和”目标的一项重要措施。塔式太阳能光热发电是一种低碳环保的新型清洁能源技术[1]。定日镜是塔式太阳能光热发电站&#xff08;以下简称塔式电站&#xff09;收集太阳能的基本组件&#xff0c;其底座由…

【算法训练-字符串 三】最长公共子串、最长公共子序列

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【】&#xff0c;使用【】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&#xff1a;目标公…

Promise异步请求/async-await

问题&#xff1a;调接口时&#xff0c;非以往的函数异步请求去调接口。而是用到了Promise中.then方法 Promise Promise是一种用于处理异步操作的对象。它代表了一个尚未完成但预计会未来完成的操作&#xff0c;并提供了一种结构化的方式来处理操作的结果。它起到代理作用&…

合宙Air724UG LuatOS-Air LVGL API控件-键盘 (Keyboard)

键盘 (Keyboard) LVGL 可以添加触摸键盘&#xff0c;但是很明显&#xff0c;使用触摸键盘的话必须要使用触摸的输入方式&#xff0c;否则无法驱动键盘。 示例代码 function keyCb(obj, e)-- 默认处理事件lvgl.keyboard_def_event_cb(keyBoard, e)if(e lvgl.EVENT_CANCEL)the…

后流量时代的跨境风口:Facebook广告

Facebook拥有超过25亿各个年龄段和人群的每月活跃用户&#xff0c;可以帮助您接触世界各地的相关消费者。无论您是需要吸引新的潜在客户还是吸引回头客访问您的在线商店&#xff0c;Facebook广告都可以为电子商务提供丰厚的投资回报&#xff1b;无论您是在沃尔玛、eBay、亚马逊…

Spring-MVC的crud增删改查--详细讲解

目录 一.前言 二.crud---配置文件 2.1 pom.xml文件 2.2 web.xml文件 2.3 spring-context.xml 2.4 spring-mvc.xml 2.5 spring-MyBatis.xml 2.6 jdbc.properties数据库配置文件 2.7 generatorConfig.xml 2.8 日志文件log4j 三.后台 3.1 pageBean.java 3.2 pageTag 3.…

进军公有云这一年,OceanBase做了什么

*本文转载自微信公众号“机器之心&#xff0c;ID&#xff1a;almosthuman2014” 如今&#xff0c;数据库市场正在迈入新的竞争阶段——一场云上的角逐。 2022 年&#xff0c;中国公有云数据库市场规模首次过半[1]&#xff0c;预计未来占比将进一步扩大。许多中国的数据库厂商也…

新能源商用车软件开发设计规范

目 录 前 言.............................................................................................................. 1 1 范围............................................................................................................... 2 2 规范性…

用HexView 观察编译后的机器代码

HexView 用于打开任意一个文件&#xff0c;以十六进制的形式从头到尾显示它每个字节的内容。 下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1zB9r5WwuTMIPNMlYl5HlvA 提取码&#xff1a;5ndl双击启动 HexView&#xff0c;然后选择菜单“文件”-“打开文件以显…

专业游戏翻译公司怎么选择比较合适

近年来&#xff0c;游戏行业持续繁荣&#xff0c;市场需求也在不断扩大&#xff0c;其中游戏翻译的需求越来越旺盛。无论是引进游戏还是让游戏走向国际市场&#xff0c;都需要专业的翻译公司来帮忙。那么&#xff0c;怎么选择合适的游戏翻译公司呢&#xff1f;让我们一起来看看…

jmeter 准确的吞吐量定时器 Precise Throughput Timer

准确的吞吐量定时器使用实例 提取码&#xff1a;gpex&#xff1a; 说明&#xff1a;配置10个线程&#xff0c;每个线程请求200次&#xff0c;通过准确地屯托梁定时器模拟QPS为20的场景 配置测试接口参考链接 配置jmeter测试脚本&#xff0c;主要关注准确的吞吐量定时器参数配置…

(2022 COLING)Context-Tuning情景化提示

论文题目&#xff08;Title&#xff09;&#xff1a;Context-Tuning: Learning Contextualized Prompts for Natural Language Generation 研究问题&#xff08;Question&#xff09;&#xff1a;自然语言生成&#xff0c;生成长文本。 研究动机&#xff08;Motivation&#…

春播秋收 “羊”鸣德州 一场“苏尼特羊”跨越千里的美丽邂逅

恰逢金秋丰收时节&#xff0c;中秋佳节来临之际&#xff0c;9月2日&#xff0c;百仕达地标之都整合天南海北优质农产品&#xff0c;联合苏尼特右旗和德州市天衢新区&#xff0c;共同举办“2023年地标之都中秋选货节暨苏尼特羊推介会”。 本次活动以“ 收自然之硕鉴本味之美”为…

国标GB28181协议视频平台EasyGBS国标平台设备播放断流现象的排查分析及解决

EasyGBS平台基于GB28181国标协议&#xff0c;支持多路设备接入&#xff0c;并对多平台、多终端分发出RTSP、RTMP、FLV、HLS、WebRTC等多种格式的视频流。平台可为大数据等综合性监管平台提供极强的视频能力&#xff0c;已经在大量的项目中落地应用&#xff0c;如明厨亮灶、平安…

框架分析(10)-SQLAlchemy

框架分析&#xff08;10&#xff09;-SQLAlchemy 专栏介绍SQLAlchemy特性分析ORM支持数据库适配器事务支持查询构建器数据库连接池事务管理器数据库迁移特性总结 优缺点优点强大的对象关系映射支持多种数据库灵活的查询语言自动管理数据库连接支持事务管理易于扩展和定制 缺点学…

华硕ROG2/ROG5/ROG6/ROG7Pro强解锁L锁-快速实现root权限-支持Zenfone9/8/7

2023年9月新增解锁BL适配&#xff08;需要联系技术远程操作&#xff09;&#xff1a; 新增支持华硕ROG5/5S/5Pro机型强制解锁BL&#xff0c;并且支持OTA在线更新功能 新增支持华硕ROG6/6Pro机型强制解锁BL&#xff0c;并且支持OTA在线更新功能 新增支持华硕ROG7/7Pro机型强制解…

antd中在vue项目中自定义穿梭框

antd中在vue项目中自定义穿梭框 1、完成代码 <template><a-modaltitle"高危因素选择":width"1000":visible"riskVisible":confirm-loading"confirmLoading"ok"handleOk"cancel"handleCancel"okText&qu…

攻克海外市场!企业客户培育,销售额倍增

随着全球市场的不断融合和国际贸易的加速&#xff0c;越来越多的企业纷纷进军海外市场&#xff0c;寻求新的增长机会。然而&#xff0c;在这一过程中&#xff0c;客户培育成为了取得成功的关键因素之一。运营坛今天将带领大家深入剖析为什么客户培育在国际市场尤为关键&#xf…

手写Spring:第2章-创建简单的Bean容器

文章目录 一、目标&#xff1a;创建简单的Bean容器二、设计&#xff1a;创建简单的Bean容器三、实现&#xff1a;创建简单的Bean容器3.0 引入依赖3.1 工程结构3.2 创建简单Bean容器类图3.3 Bean定义3.4 Bean工厂 四、测试&#xff1a;创建简单的Bean容器4.1 用户Bean对象4.2 单…