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

一.方法:

方法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:遮罩层

  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值