修改element-ui全局样式

应用中经常会遇到根据美工设计，修改element-ui中table、input等组件默认样式的需求

一般解决的方法为在<style></style>中直接重写对应样式，将其应用于全局，这样的缺点是牵一发而动全身。

css中通过添加/deep/，可以修改element-ui全局样式，同时只作用于当前组件

• 修改el-table样式

/**
table样式
*/

.regulaContainer /deep/ .el-table td {
  border-bottom: 1px solid #0c4e97;
}

.regulaContainer /deep/ .el-table th.is-leaf {
  border-bottom: 1px solid #0c4e97;
}

.regulaContainer /deep/ .el-table {
  background-color: transparent;
  border-top: 2px solid #0c4e97;
  border-bottom: 2px solid #0c4e97;
}

.regulaContainer /deep/ .el-table th {
  background-color: transparent;
}
.regulaContainer /deep/ .el-table tr {
  background-color: transparent;
}
.regulaContainer /deep/ .el-table__body tr:hover > td{
  background-color: rgba(0, 83, 159, 0.6);
}
.regulaContainer /deep/ .el-table::before{
  background-color: transparent;
}
.regulaContainer /deep/ .el-checkbox__inner{
  border: 1px solid #047edb;
  background-color: transparent;
}

regulaContainer为当前组件的class

• 修改滚动条样式

***
滚动条
*/
.reserReguCard /deep/ ::-webkit-scrollbar-thumb {
  background-color: #1160b5;
  /*滑动条表面*/
  /*border:solid 1px gainsboro; !*滑动条边框*!  */
  border-radius: 15px;
  /*滑动条圆角宽度*/
}

.reserReguCard /deep/ ::-webkit-scrollbar-track-piece {
  background-color: #013a78;
  border-radius: 15px;
  /*滑道*/
  /*-webkit-border-radius: 4px; !*滑道圆角宽度*!*/
}

结果如图所示：

table.png

• 修改button渐变样式

/**
button样式
*/
.regulaContainer /deep/ .el-button {
  border-radius: 4px;
}
.regulaContainer /deep/ .el-button--primary {
  background: -webkit-linear-gradient(left, #31aaff, #156cfb);
}
.regulaContainer /deep/ .el-button--danger {
  background: -webkit-linear-gradient(left, #ff8e78, #fc4545);
}
.regulaContainer /deep/ .export {
  background: -webkit-linear-gradient(left, #00ffff, #00c6ff);
  border: 1px solid #00ffff;
  color: white;
}

如图所示：

button.png

• 修改el-select下拉框的样式

因el-select下拉框是独立于组件的，常用的修改方法不起作用，为自定义样式，可以利用popper-class设置下拉框的class，从而设置样式

如下图所示：

el-select-dropdown.png

1. 设置class

<el-select
  v-model="rainForm.resName"
  placeholder="请选择水库"
  class="innerWidth"
  popper-class="select-option"
  @change="handleSearch"
>
  <el-option label="全部" value></el-option>
  <el-option v-for="item in reservoirs" :key="item" :label="item" :value="item"></el-option>
</el-select>

2. 利用class自定义样式

<style>
.select-option {
  background-color: rgba(25, 51, 88, 0.9) !important;
  border: 1px solid #00b3ff !important;
  box-shadow: 0 2px 12px 0 rgba(0, 152, 217, 0.5) !important;
}
</style>

最终结果如下图所示：

el-select-dropdown.png

• 修改el-date-picker日期下拉框样式

与设置el-select方法一样，利用popper-class实现

1. 设置class

<el-date-picker
  popper-class="date-prop"
  type="datetime"
  placeholder="选择开始日期"
  v-model="form.startTime"
></el-date-picker>

2.利用class自定义样式

<style>
.date-prop .el-input__inner {
  background-color: transparent;
  color: #606266 !important;
  border: 1px solid #dcdfe6;
}
</style>