修改element中的下拉面板样式

目前总结出来了两种方式可以修改：

方法一：将下拉面板添加至body中修改样式

话不多说，上代码：

1、设置属性，将面板添加至body中：

// select需要设置:popper-append-to-body="false"
<el-select 
	v-model="form.depart"  
	placeholder="请选择内容" 
	size="small" 
	:popper-append-to-body="false">
	   <el-option
	     v-for="item in departmentArr"
	     :key="item.zd_code"
	     :label="item.zd_name"
	     :value="item.zd_code">
	   </el-option>
 </el-select>
// el-date-picker需要设置:append-to-body="false"
<el-date-picker
  v-model="form.dateRange"
  type="daterange"
  align="right"
  size="small"
  :append-to-body="false"
  unlink-panels
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions">
</el-date-picker>

2、编写scss样式：

$drownBgc: rgba(27, 49, 94, 1);
$drownBorder: rgba(27, 49, 94, 1);
$drownColor: #fff;
$drownHoverBgc: rgba(21, 90, 155, .5);
$drownHoverBoxShadow: inset 0 0 10px #fff !important;
.el-select {
  /deep/ {
    .el-input__inner {
      background: transparent;
    }
    .el-select-dropdown {
      z-index: 20;
      background: $drownBgc;
      border-color: $drownBorder;
      .el-scrollbar__wrap {
        overflow-x: auto !important;
        overflow-y: auto !important;
        margin-bottom: 0 !important;
      }
      .el-select-dropdown__item {
        color: $drownColor;
      }
      .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
        background: $drownHoverBgc;
        box-shadow: $drownHoverBoxShadow;
      }
    }
  }
}

.el-date-editor {
  /deep/ {
    .el-picker-panel {
      background: $drownBgc;
      border-color: $drownBorder;
      color: $drownColor;
      .el-date-picker__header, .el-date-range-picker__header {
        color: $drownColor;
        .el-picker-panel__icon-btn, .el-date-picker__header-label {
          color: $drownColor;
        }
      }
    }
  }
}

3、引入编写的对应的样式文件：

<style lang="scss" scoped>
  @import '../../../../static/css/darkForm.scss';
</style>

方法二：设置popper-class将该类名应用于下拉面板中，修改样式

1、设置popper-class属性，添加面板的classs类：

// 设置专有的属性dark_form
          <el-date-picker
            v-show="form.dateType === '1'"
            v-model="form.dataCheckDay"
            type="date"
            size="small"
            format="yyyy-MM-dd"
            class="testDate"
            popper-class="dark_form"
            placeholder="选择日期">
          </el-date-picker>

2、设置样式：

注意：不要设置scope私有样式，否则会无效。

<style lang="scss">
  $drownBgc: rgba(27, 49, 94, 1);
  $drownBorder: rgba(27, 49, 94, 1);
  //$drownBorder: rgba(25,25,112, 1);
  $drownColor: #fff;
  $drownHoverBgc: rgba(21, 90, 155, .5);
  $drownHoverBoxShadow: inset 0 0 10px #fff !important;
  .dark_form.el-picker-panel {
    background: $drownBgc;
    border-color: $drownBorder;
    color: $drownColor;
  }

  .dark_form.el-popper {
    .popper__arrow {
      border-bottom-color: $drownBgc;
    }

    .popper__arrow::after {
      border-bottom-color: $drownBgc;
    }
  }
</style>