Element-UI的使用——表格el-table组件去除边框、滚动条设置、隔行变色、去除鼠标悬停变色效果(基于less)
// Element-ui table表格去掉所有边框,如下:
// 备注:若去掉所有边框,可自行将头部边框注释掉即可
// 该样式写在style scoped外面在el-table 中添加class="customer-table"类名
//去掉每行的下边框/deep/ .el-table td.el-table__cell,/deep/ .el-table th.el-table__cell.is-leaf {border-bottom: none;} // 去掉表格单元格边框
.customer-table th{border:none;}
.customer-table td,.customer-table th.is-leaf {border:none;
}
// 表格最外边框
.el-table--border, .el-table--group{border: none;
}
// 头部边框
.customer-table thead tr th.is-leaf{border: 1px solid #EBEEF5;border-right: none;
}
.customer-table thead tr th:nth-last-of-type(2){border-right: 1px solid #EBEEF5;
}
// 表格最外层边框-底部边框
.el-table--border::after, .el-table--group::after{width: 0;
}
.customer-table::before{width: 0;
}
.customer-table .el-table__fixed-right::before,.el-table__fixed::before{width: 0;
}
// 表格有滚动时表格头边框
.el-table--border th.gutter:last-of-type {border: 1px solid #EBEEF5; border-left: none;
}
// 去除边框线
/deep/ .el-table::before {height: 0;
}
修改滚动条的样式,例如设置表格滚动条的颜色、宽度、 背景颜色等:
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {background-color: #2751be;border-radius: 6px;}/deep/ .el-table__body-wrapper::-webkit-scrollbar {width: 8px; // 横向滚动条height: 25px; // 纵向滚动条 必写background: #12244d;}/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {border-radius: 10px; /*滚动条的背景区域的圆角*/background-color: rgb(18, 36, 77); /*滚动条的背景颜色*/}
隔行变色:
//el-table组件添加属性 :stripe="true"// 隔行变色(less)/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {background-color: rgba(48, 112, 249, 0.05) !important;}
去除鼠标悬停变色效果
//去除鼠标触摸变色效果/deep/ .el-table tbody tr:hover > td{background-color: transparent;}
相关文章:
Element-UI的使用——表格el-table组件去除边框、滚动条设置、隔行变色、去除鼠标悬停变色效果(基于less)
// Element-ui table表格去掉所有边框,如下: // 备注:若去掉所有边框,可自行将头部边框注释掉即可 // 该样式写在style scoped外面在el-table 中添加class"customer-table"类名 //去掉每行的下边框/deep/ .el-table td.el-table__c…...
python的一些知识点
之前自学过python,学了一些基本语法,但忘得厉害。最近,在努力地写代码,在学代码,写代码中学习python,为此记录一些关于python的知识点。...
QML 带框最大化显示方法
1.QML窗口最大化很多会给出如下方法: visibility: "FullScreen" 此方法不好的方面是没有最大化,最小化,关闭按钮 2.通过showMaximized() 方法可以满足我们需求:在onCompleted 方法中执行 实现的效果如下:...
conda命令大全
conda list 查看环境中已经安装了的软件包 conda list --name your_env_name(虚拟环境名) 查看某个环境下的包 conda config --show 查看现有源 conda env list 或者 conda info -e 查看当前存在那些虚拟环境 conda update conda 更新至最新的conda版本 conda update [pac…...
国庆要闻回顾 | OpenAI 拟研发 AI 手机;9月以太坊上NFT销售量创2021年2月以来最低记录...
国庆期间区块链行业要闻回顾:产业方面,全国区块链行业产教融合共同体在雄安新区成立,巴西推出基于区块链的数字身份证,瑞银集团在以太坊上推出代币化货币市场基金试点,NASA拟在月球设立区块链数据中心以保存国家机密资…...
国家开放大学 模拟试题 训练
试卷代号:2136 管理会计 参考 试题 一、单项选择题(每小题1分,共20分) 1.管理会计依靠各种功能来助力企业战略,下列哪项是管理会计的核心功能( )。 A.评价功能 B.预测功能 C.决策功能…...
【GIT版本控制】--常见问题与解决方案
一、修复损坏的仓库 修复损坏的Git仓库可能是面临的一种问题,这通常是由于文件损坏、存储介质问题或不正确的操作等原因引起的。以下是一些修复损坏的Git仓库的常见问题和解决方案: 常见问题: 无法执行Git命令:当尝试运行Git命令…...
Redis安装及key、string操作
安装 在官网下载的数据包上传到Linux家目录 Install Redis from Source | Redis wget https://download.redis.io/redis-stable.tar.gz tar -xzvf redis-stable.tar.gz cd redis-stable make 编译后出现以下提示后输入make install 出现以下提示则安装成功 输入redis-sever启…...
TCP和UDP的由浅到深的详细讲解
目录 前言 一.TCP 1.1 什么是TCP? 1.2TCP的连接与释放(确认应答机制) 1.2.1三次握手 1.2.2四次挥手 1.3TCP滑动窗口(效率机制) 1.4流量控制(安全机制) 1.5拥塞控制(安全机制࿰…...
端粒/端粒酶生信切入点,6+端粒酶+泛癌+甲基化+实验。
今天给同学们分享一篇端粒酶泛癌甲基化实验的生信文章“Genomic, epigenomic, and transcriptomic signatures for telomerase complex components: a pan‐cancer analysis”,这篇文章于2022年10月31日发表在Mol Oncol期刊上,影响因子为6.6。 激活端粒酶…...
XMLHttpRequest和Fetch API
XMLHttpRequest和Fetch API 1、XMLHttpRequest2、Fetch API总结 简述:XMLHttpRequest和Fetch API是两种常用的JavaScript网络请求方式,可以用来发送HTTP请求并获取服务器响应。 1、XMLHttpRequest XMLHttpRequest:XMLHttpRequest是一种传统的…...
U-boot下netconsole实现
U-boot下netconsole实现 参考1.函数main_loop和u-boot命令执行 上面的do-while会循环命令解析器的"命令输入解析–执行"运行模式。 其中的函数run_list执行如下的函数调用流程:run_list–>run_list_real–>run_pipe_real->cmd_process 源码跟读…...
Unity设计模式——原型模式
原型模式(Prototype)用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象。原型模式其实就是从一个对象再创建另外一个可定制的对象,而且不需知道任何创建的细节 。 原型类 Prototype: abstract class P…...
leetcode 96 不同的二叉搜索树
给你一个整数 n ,求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种?返回满足题意的二叉搜索树的种数。 示例 1: 输入:n 3 输出:5 示例 2: 输入:n 1 输出:1…...
http发送和接收图片json文件
一、http数据发送 1、先将图片转换为base64格式 std::string detectNet::Mat2Base64(const cv::Mat &image, std::string imgType){std::vector<uchar> buf;cv::imencode(imgType, image, buf);//uchar *enc_msg reinterpret_cast<unsigned char*>(buf.data…...
MM-Camera架构-ProcessCaptureRequest 流程分析
文章目录 processCaptureRequest\_3\_41.1 mDevice1.2 mDevice->ops->process\_capture\_request1.3 hardware to vendor mct\_shimlayer\_process\_event2.1 mct\_shimlayer\_handle\_parm2.2 mct\_shimlayer\_reg\_buffer processCaptureRequest_3_4 sdm660的摄像头走…...
196、管理 RabbitMQ 的用户
开启Rabbitmq的一些命令: 小黑窗输入: rabbitmq-plugins enable rabbitmq_management 启动控制台插件, 就是启动登录rabbitmq控制台的页面,rabbitmq_management 代表了RabbitMQ的管理界面。 rabbitmq-server 启动rabbitMQ服务器…...
【已解决】Python读取sql数据,报错:Not an executable object,解决方案
【已解决】Python读取sql数据,报错:Not an executable object,解决方案 1.报错内容: 通过Python连接sql,读取sql中数据,报错:Not an executable object。具体代码及报错内容见下: …...
STM32 CubeMX ADC采集(HAL库)
STM32 CubeMX ADC采集(HAL库) STM32 CubeMX STM32 CubeMX ADC采集(HAL库)ADC介绍ADC主要特征最小识别电压值:2.4/4096≈0.6mv(不考虑误差)一、STM32 CubeMX设置二、代码部分三,单通道…...
[UUCTF 2022 新生赛]ezpop - 反序列化+字符串逃逸【***】
[UUCTF 2022 新生赛]ezpop 一、解题过程二、其他WP三、总结反思 一、解题过程 题目代码: <?php //flag in flag.php error_reporting(0); class UUCTF{public $name,$key,$basedata,$ob;function __construct($str){$this->name$str;}function __wakeup(){i…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验
系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
Python如何给视频添加音频和字幕
在Python中,给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加,包括必要的代码示例和详细解释。 环境准备 在开始之前,需要安装以下Python库:…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
ArcGIS Pro制作水平横向图例+多级标注
今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作:ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等(ArcGIS出图图例8大技巧),那这次我们看看ArcGIS Pro如何更加快捷的操作。…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
