ElementUI组件样式修改--表格背景透明，去除下横线（附：组件决定性class名（待整理验证，不完全正确））

2023-10-12 22:30
文章标签 组件 整理 验证 表格 修改 透明 背景 横线 elementui 样式 去除 class 完全正确 决定性

本文主要是介绍ElementUI组件样式修改--表格背景透明，去除下横线（附：组件决定性class名（待整理验证，不完全正确）），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

    • 一.方法：
      • 方法1：使用/deep/（推荐）
      • 方法二：使用table属性（无法设置表格透明）
    • 二.举一反三：修改elementUi（甚至其他ui组件库）的组件样式也可以用相同的方法：
    • 三.可能出现的问题：
    • 四.拓展：
    • 五.组件决定性class名(待整理验证，不完全正确）
    • 六.对于一些浮层组件，生成的div不在当前组件之内，甚至不在App.vue组件的div内，和App.vue组件的div平级，设置单页面样式，不污染全局的方法
      • 关键点
      • 1. popover弹出框
      • 2.Cascader层级选择器（下拉选择框部分，选择输入框可用div包裹，故在此不讨论）
      • 3.select选择器（这里的子元素不需要深度选择器就可以自己设置样式，不是很懂）
      • 4.DatePicker日期选择器（年份，其他选择器需要修改一些类名）

一.方法：

方法1：使用/deep/（推荐）

1）div包裹el-table标签（不设置div也可以，但是为了不污染全局，设置div起到一个类似作用域的作用）

<div class="table-wrapper"><el-table></el-table>
</div>

2）设置css（关键词：/deep/）

/**表格背景透明 */
//透明化整体
.table-wrapper /deep/  .el-table,
.el-table__expanded-cell {background-color: transparent !important;
}
//透明化行、单元格,删除表头下横线
.table-wrapper /deep/ tr, .table-wrapper /deep/ th, .table-wrapper /deep/ td {background: #1439391c !important;color:#fff;border-bottom: 0px; //删除表头下横线
}
//hover时样式
.table-wrapper /deep/  .el-table tbody tr:hover>td {background-color: #367f7f78 !important
}
// 表格内容(有用)
.table-wrapper /deep/ .el-table__row {background: #1439391c !important;color: #46d4ff;
}
/**表格背景透明end */

方法二：使用table属性（无法设置表格透明）

1）关键点：
a. 此方法只能设置行和单元格的样式，无法设置表格整体透明，所以表格透明需求无法完成，表格其他方面的样式可以完成；
b. 设置自定义样式时，不能写在scoped中；
c. 设置样式时需要!important。

background: #1439391c !important;

2）设置

<el-table header-row-class-name="toumingClass"header-cell-class-name="toumingClass"row-class-name="toumingClass"cell-class-name="toumingClass">

<style>
.toumingClass {background: #1439391c !important;color: #fff !important;border-bottom: 0px !important;
}
</style>

二.举一反三：修改elementUi（甚至其他ui组件库）的组件样式也可以用相同的方法：

1.设置div包裹组件标签（不设置div也可以，但是为了不污染全局，设置div起到一个类似作用域的作用）
2.找到要修改的标签对应的class

三.可能出现的问题：

1.当你所有可见字符都没有问题，但是设置依然没生效的时候，你可以看看是不是空格的问题。下图中两个圆圈所圈中的空格就不一样，以致于一个生效，一个没生效（我也不知道为什么我可能打出一个使不能生效的空格，删除问题空格，重新打出一个空格就生效了，神奇）
在这里插入图片描述

四.拓展：

1./deep/–穿透scoped：
Scoped CSS:Web组件产生不污染其他组件，也不被其他组件污染的CSS规范
vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>(/deep)，穿透scoped。

有些Sass 之类的预处理器无法正确解析 >>>。所以推荐使用 /deep/ 操作符( >>> 的别名)

<style scoped>外层 >>> 第三方组件 {样式}外层 /deep/ 第三方组件 {样式（外层包裹的第三方组件）}/deep/  第三方组件 {样式（当前页面的所有第三方组件）}
</style>

五.组件决定性class名(待整理验证，不完全正确）

  1. Cascader 级联选择器–下拉框（感觉会全局复制，详见六）
	.el-cascader__dropdown {color: #fff;border: 1px solid #157cce;}

src\view\dataCenter\map.vue
参考

六.对于一些浮层组件，生成的div不在当前组件之内，甚至不在App.vue组件的div内，和App.vue组件的div平级，设置单页面样式，不污染全局的方法

关键点

1）添加popper-class属性，将组件内div包裹起来
2）需要sass，<style lang="scss">
3）找出组件生成html后的相关类名，对其重新设置
4）重新设置的样式最好都带上!important，避免项目打包之后，因级别不够失效
3）不知道为什么，深度选择器>>>,/deep/,::v-deep都没用
待研究，官方文档：范围css

1. popover弹出框

1）html

<el-popover  popper-class="map-popover">...</el-popover>

2）相关类名

.map-popover{background-color: #0838aa !important;border-color: #157cce !important;.popper__arrow {border-top-color: #157cce !important;border-bottom-color: #157cce !important;}.popper__arrow::after {border-top-color: #157cce !important;border-bottom-color: #157cce !important;}
}

在这里插入图片描述
3）效果
在这里插入图片描述

2.Cascader层级选择器（下拉选择框部分，选择输入框可用div包裹，故在此不讨论）

1）html

<el-cascader  popper-class="map-cascader"  ></el-cascader>

2）相关类名

.map-cascader{color: #fff;border: 1px solid #157cce !important;.el-cascader-panel {color: #fff !important;.el-cascader-menu {width: 100% !important;color: #fff !important;background-color: #0648bb !important;.el-cascader-menu__wrap {.el-cascader-menu__list {.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{background: #006dc3 !important;}}}}}.popper__arrow {border-top-color: #157cce !important;border-bottom-color: #157cce !important;}.popper__arrow::after {border-top-color: #157cce !important;border-bottom-color: #157cce !important;}
}

在这里插入图片描述
在这里插入图片描述

3）效果
在这里插入图片描述

3.select选择器（这里的子元素不需要深度选择器就可以自己设置样式，不是很懂）

1）html

<el-select popper-class="selectOption"></el-select>

2)相关类名

<style lang="scss" >
.selectOption{background-color: #0838aa !important;border-color: #157cce !important;.el-select-dropdown__item{color:#fff !important;}.el-select-dropdown__item.selected{background-color:#1345b1 !important;}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#1345b1 !important;}.popper__arrow {border-top-color: #157cce !important;border-bottom-color: #157cce !important;}.popper__arrow::after {border-top-color: #0838aa !important;border-bottom-color: #0838aa !important;}
}
</style>

在这里插入图片描述
3)效果
在这里插入图片描述

4.DatePicker日期选择器（年份，其他选择器需要修改一些类名）

1）html

<el-date-picker popper-class="issue-date-box"></el-date-picker>

2）相关类名

<style lang="scss">.issue-date-box{background-color:#0834a4 !important;border: 1px solid #157cce !important ;color: #fff !important;.el-date-picker__header--bordered {border-bottom-color: #157cce;.el-picker-panel__icon-btn, .el-date-picker__prev-btn, .el-icon-d-arrow-left {color: #fff !important;}.el-date-picker__header-label {color: #fff !important;}}.el-picker-panel__content {table{td {padding: 10px 3px !important; .cell {color: #fff !important;}} td.current {padding: 10px 3px !important; .cell {color: #0ecffd !important;}} }}.popper__arrow {border-top-color: #157cce !important;border-bottom-color: #157cce !important;}.popper__arrow::after {border-top-color: #0838aa !important;border-bottom-color: #0838aa !important;}}
</style>

在这里插入图片描述
3）效果
在这里插入图片描述

附：css画出三角形

随手记，未整理
.el-loading-mask：遮罩层

这篇关于ElementUI组件样式修改--表格背景透明，去除下横线（附：组件决定性class名（待整理验证，不完全正确））的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/198866。

相关文章

Java编译生成多个.class文件的原理和作用

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类（常规内部类）局部内部类（方法内部类）匿名内部类二、
阅读更多...
opencv图像处理之指纹验证的实现

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、
阅读更多...
Python实现无痛修改第三方库源码的方法详解

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很
阅读更多...
利用Python开发Markdown表格结构转换为Excel工具

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
Mysql中深分页的五种常用方法整理

Mysql中深分页的五种常用方法整理

《Mysql中深分页的五种常用方法整理》在数据量非常大的情况下,深分页查询则变得很常见,这篇文章为大家整理了5个常用的方法,文中的示例代码讲解详细,大家可以根据自己的需求进行选择... 目录方案一：延迟关联 (Deferred Join)方案二：有序唯一键分页 (Cursor-based Paginatio
阅读更多...
Linux修改pip和conda缓存路径的几种方法

Linux修改pip和conda缓存路径的几种方法

《Linux修改pip和conda缓存路径的几种方法》在Python生态中,pip和conda是两种常见的软件包管理工具,它们在安装、更新和卸载软件包时都会使用缓存来提高效率,适当地修改它们的缓存路径... 目录一、pip 和 conda 的缓存机制1. pip 的缓存机制默认缓存路径2. conda 的缓
阅读更多...
Linux修改pip临时目录方法的详解

Linux修改pip临时目录方法的详解

《Linux修改pip临时目录方法的详解》在Linux系统中,pip在安装Python包时会使用临时目录（TMPDIR）,但默认的临时目录可能会受到存储空间不足或权限问题的影响,所以本文将详细介绍如何... 目录引言一、为什么要修改 pip 的临时目录？1. 解决存储空间不足的问题2. 解决权限问题3. 提
阅读更多...
Java利用poi实现word表格转excel

Java利用poi实现word表格转excel

《Java利用poi实现word表格转excel》这篇文章主要为大家详细介绍了Java如何利用poi实现word表格转excel,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、每行对象类需要针对不同的表格进行对应的创建。package org.example.wordToEx
阅读更多...
Linux文件名修改方法大全

Linux文件名修改方法大全

《Linux文件名修改方法大全》在Linux系统中,文件名修改是一个常见且重要的操作,文件名修改可以更好地管理文件和文件夹,使其更具可读性和有序性,本文将介绍三种在Linux系统下常用的文件名修改方法... 目录一、引言二、使用mv命令修改文件名三、使用rename命令修改文件名四、mv命令和rename命
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2