elementUI修改table样式

在Vue项目中,如果使用的是单文件组件(.vue),并且样式是通过<style>标签定义的,vue2可以使用/deep/,vue3可以使用::v-deep选择器来修改ElementUI组件的样式。

1.修改表头背景色
  /deep/.el-table__header th {
    background-color: #000f1c;
    color: #3b496b;
  }
2.设置表格背景色
  /deep/.el-table,
  /deep/.el-table__expanded-cell {
    background-color: #000f1c !important;
  }
3.设置表格边框
  /deep/.el-table tr,
  /deep/.el-table th,
  /deep/.el-table td {
    border: none !important;
  }
4.修改滚动条样式
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #104ddb;
  }
  ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #0071bb;
    border-radius: 6px;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0b253a;
  }
5.设置隔行变色
<script> 
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      console.log(row);
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  }
}
</script>

<style scoped lang="scss">
  /deep/.el-table .warning-row {
    background: #000f1c;
    color: #ffffff;
    border: 0;
  }

  /deep/.el-table .success-row {
    background: #041628;
    color: #ffffff;
  }
</style>
6.鼠标滑过当前行变色
  /deep/.el-table__body tr:hover > td {
    background-color: #083a5a !important;
  }
7.完整代码
<template>
  <div class="cameraList">
    <el-table
      :data="tableData"
      style="width: 30%"
      height="200"
      size="mini"
      :row-class-name="tableRowClassName"
    >
      <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>
export default {
  methods: {
    // 表格隔行变色
    tableRowClassName({ row, rowIndex }) {
      console.log(row);
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
  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 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          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>
<style scoped lang="scss">
.cameraList {
  width: 1920px;
  height: 1080px;
  background: #000f1c;

  /* elementUI表格table样式修改 */
  /deep/.el-table__header th {
    background-color: #000f1c;
    color: #3b496b;
  }
  /deep/.el-table .warning-row {
    background: #000f1c;
    color: #ffffff;
    border: 0;
  }

  /deep/.el-table .success-row {
    background: #041628;
    color: #ffffff;
  }

  // 鼠标滑过,当前行变色
  /deep/.el-table__body tr:hover > td {
    background-color: #083a5a !important;
  }

  // 表格背景色
  /deep/.el-table,
  /deep/.el-table__expanded-cell {
    background-color: #000f1c !important;
  }

  // 表格边框
  /deep/.el-table tr,
  /deep/.el-table th,
  /deep/.el-table td {
    border: none !important;
  }

  /deep/.el-table::before {
    height: 0;
  }

  // 滚动条上面超出的部分
  /deep/.el-table .el-table__cell.gutter {
    background: #000f1c;
  }

  // 修改滚动条样式
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #104ddb;
  }
  ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #0071bb;
    border-radius: 6px;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #0b253a;
  }
}
</style>
8.效果图如下

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【WiFi】WiFi中RSSI、SNR、NF之间关系及说明

RSSI&#xff08;接收信号强度指示&#xff09; 定义&#xff1a; RSSI 是一个相对值&#xff0c;用于表示接收到的无线信号的强度。它通常由无线设备的硬件&#xff08;如无线网卡或无线芯片&#xff09;直接提供。 计算&#xff1a; RSSI 的计算通常是由设备的无线芯片完成的…

爬虫基础知识点

最近看了看爬虫相关知识点&#xff0c;做了记录&#xff0c;具体代码放到了仓库&#xff0c;本文仅学习使用&#xff0c;如有违规请联系博主删除。 这个流程图是我使用在线AI工具infography生成的&#xff0c;这个网站可以根据url或者文本等数据自动生成流程图&#xff0c;挺…

路由引入问题(双点双向路由回馈问题)

简介 总所周知&#xff0c;路由引入import又称路由重分发redistribute&#xff0c;为了解决不同路由协议进程间路由信息不互通而使用的技术&#xff0c;由于不同路由协议的算法、机制、开销等因素的差异&#xff0c;它们之间无法直接交换路由信息。因此&#xff0c;路由引入技…

LAVE——基于大语言模型的新型代理辅助视频编辑工具允许用户根据自己的编辑风格进行调整

概述 论文地址&#xff1a;https://arxiv.org/abs/2402.10294 视频是一种非常强大的交流和讲述故事的媒介。随着社交媒体和视频共享平台的出现&#xff0c;视频的受欢迎程度直线上升&#xff0c;许多人都在制作和分享自己的内容。然而&#xff0c;对于初学者来说&#xff0c;视…

Java安全—SpringBootActuator监控泄露Swagger自动化

前言 今天依旧是SpringBoot框架&#xff0c;估计还要一篇文章才能把它写完&#xff0c;没办法&#xff0c;Java安全的内容太多了。 Actuator SpringBoot Actuator模块提供了生产级别的功能&#xff0c;比如健康检查&#xff0c;审计&#xff0c;指标收集&#xff0c;HTTP跟踪…

docker快速实现ELK的安装和使用

目录 一、ELK功能原理 二、项目功能展示​ 三、日志查询展示​ 四、ELK安装步骤 1、创建elasticsearch、kibana、filebeat相关data、log、conf目录 2、进入/usr/local/elk目录&#xff0c;并创建一个docker网络 3、启动 elasticsearch容器 4、运行kibana容器 5、启动f…

【Spark】Spark Join类型及Join实现方式

如果觉得这篇文章对您有帮助&#xff0c;别忘了点赞、分享或关注哦&#xff01;您的一点小小支持&#xff0c;不仅能帮助更多人找到有价值的内容&#xff0c;还能鼓励我持续分享更多精彩的技术文章。感谢您的支持&#xff0c;让我们一起在技术的世界中不断进步&#xff01; Sp…

从YOLOv5到训练实战:易用性和扩展性的加强

文章目录 前言一、模型介绍二、YOLOv5网络结构1.Input&#xff08;输入端&#xff09;&#xff1a;智能预处理与优化策略2.Backbone&#xff08;骨干网络&#xff09;&#xff1a;高效特征提取3.NECK&#xff08;颈部&#xff09;&#xff1a;特征增强与多尺度融合4.Prediction…

Java爬虫设计:淘宝商品详情接口数据获取

1. 概述 淘宝商品详情接口&#xff08;如Taobao.item_get&#xff09;允许开发者通过编程方式&#xff0c;以JSON格式实时获取淘宝商品的详细信息&#xff0c;包括商品标题、价格、销量等。本文档将介绍如何设计一个Java爬虫来获取这些数据。 2. 准备工作 在开始之前&#x…

AIGC 013-CoT用思维链挖掘自回归语言模型的潜在能力

AIGC 013-CoT用思维链挖掘自回归语言模型的潜在能力 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 纯自回归式语言模型&#xff0c;本来并不具备优秀推理能力&#xff0c;特别是在数学问题的推理。但是现在的生成模型是能实现一些数学的推理的。研究者认为当模型足够大…

上传文件时获取音视频文件时长和文本文件字数

获取音视频文件时长和文本文件字数 一、获取音视频文件时长二、计算文本文件字数 最近有个需求&#xff0c;要求上传文件时获取音视频文件时长和文本文件字数&#x1f436;。 发现这样的冷门资料不多&#xff0c;特做个记录。本文忽略文件上传功能&#xff0c;只封装核心的工具…

ue5.2 数字孪生(11)——Web_UI插件网页通信

Web_UI插件下载安装&#xff1a; https://github.com/tracerinteractive/UnrealEngine/releases 下载对应Ue版本的Web_UI插件以及相关的Json、Http库&#xff1b; 将插件安装到引擎根目录 Ue链接Web&#xff1a; 在项目中启用插件并重启项目&#xff1b; 创建基于Web的用户…

postman可以通的请求,前端通不了(前端添加Content-type,后端收不到请求)

接口完成之后,自己使用postman测试了一下,没有问题; 可是在和小组前端调试接口的时候,他却说访问不了; 信息如下:(我自己写的一个打印请求信息的拦截器) 发现报错信息是: Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported 也就是说…

EFAK kafka可视化管理工具部署使用

简介&#xff1a;EFAK是开源的可视化和管理软件。它允许您查询、可视化、提醒和探索您的指标&#xff0c;无论它们存储在何处。简单来说&#xff0c;它为您提供了将 Kafka 集群数据转换为漂亮的图形和可视化效果的工具。 环境&#xff1a;①操作系统&#xff1a;CentOS7.6&…

MySQL生产环境备份脚本

全量备份脚本&#xff0c;其中BakDir&#xff0c;ZlbakDir&#xff0c;LogFile需要自己创建 #!/bin/bash export LANGen_US.UTF-8# 指定备份目录 BakDir/root/beifen/data/mysqlbak/data/allbak # 指定增量备份目录 ZlbakDir/root/beifen/data/mysqlbak/data/zlbak # 备份日志…

快速搭建express

一、 安装express-generator npm i -g express-generator二、创建项目 express -e 项目名三、安装依赖 npm install四、运行项目 cd 项目名npm start 五、打开网页http://localhost:3000/ 六、实时更新 1、安装nodemon npm i -g nodemon2、修改package.json 改成nodemon …

网络编程 01:计算机网络概述,网络的作用,网络通信的要素,以及网络通信协议与分层模型

一、概述 记录时间 [2024-12-13] 本文讲述网络编程相关知识&#xff0c;例如&#xff0c;什么是计算机网络&#xff0c;网络有什么作用&#xff0c;网络通信的要素是什么&#xff0c;以及网络通信协议与分层模型。 网页编程 / 网络编程区别&#xff1a; 网页编程&#xff1a;J…

亚信安全DeepSecurity完成与超云超融合软件兼容性互认

近日&#xff0c;亚信安全与超云数字技术集团有限公司&#xff08;以下简称“超云”&#xff09;联合宣布&#xff0c;亚信安全成功完成与超云超融合软件的产品兼容性互认证。经严格测试&#xff0c;亚信安全云主机安全DeepSecurity与超云FS5000增强型融合系统&#xff08;简称…

【工业机器视觉】基于深度学习的水表盘读数识别(3-数据标注与转换)

【工业机器视觉】基于深度学习的仪表盘识读&#xff08;2&#xff09;-CSDN博客 数据标注 标注扩展 Labelme 和 LabelImg 都是用于创建机器学习和计算机视觉项目所需标注数据的工具。它们都允许用户通过图形界面手动标注图像&#xff0c;但各自有其特点和适用场景。 Labelme…

【硬件测试】基于FPGA的4ASK调制解调通信系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.Verilog核心程序 4.开发板使用说明和如何移植不同的开发板 5.完整算法代码文件获得 1.算法仿真效果 本文是之前写的文章: 《基于FPGA的4ASK调制解调系统,包含testbench,高斯信道模块,误码率统计模块,可以设置不同SNR》 的…