文章目录
- 一.方法：
- 方法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">
二.举一反三：修改elementUi（甚至其他ui组件库）的组件样式也可以用相同的方法：
1.设置div包裹组件标签（不设置div也可以，但是为了不污染全局，设置div起到一个类似作用域的作用）
2.找到要修改的标签对应的class
三.可能出现的问题：
1.当你所有可见字符都没有问题，但是设置依然没生效的时候，你可以看看是不是空格的问题。下图中两个圆圈所圈中的空格就不一样，以致于一个生效，一个没生效（我也不知道为什么我可能打出一个使不能生效的空格，删除问题空格，重新打出一个空格就生效了，神奇）
四.拓展：
1./deep/–穿透scoped：
Scoped CSS:Web组件产生不污染其他组件，也不被其他组件污染的CSS规范
vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>(/deep)，穿透scoped。
有些Sass 之类的预处理器无法正确解析 >>>。所以推荐使用 /deep/ 操作符( >>> 的别名)
五.组件决定性class名(待整理验证，不完全正确）
- 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，
3)效果
4.DatePicker日期选择器（年份，其他选择器需要修改一些类名）
1）html
<el-date-picker popper-class="issue-date-box">el-date-picker>
2）相关类名
3）效果
附：css画出三角形
随手记，未整理
.el-loading-mask：遮罩层