element-ui中下拉框样式修改

 

我们会发现直接通过class属性修改样式是不生效的 ，即使加上::v-deep样式穿透也不行

这时候我们需要把popper-append-to-body属性值设为false：

<template>
  <el-select
    v-model="currentSelectArea"
    placeholder="请选择"
    style="width:110px"
    size="mini"
    :popper-append-to-body="false">
    <el-option
      v-for="item in areaOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

此时再去修改样式：

<style lang="scss" scoped>
// 选择框样式
.el-select{
  margin-left: 20px;
}
::v-deep .el-input--mini .el-input__inner{
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid #AFBCFF;
  box-shadow: 0 0 10px 1px #AFBCFF inset;
  color: $white;
}
::v-deep .el-select .el-select-dropdown{
  background-color: #AFBCFF;
  border: 1px solid #AFBCFF;
  box-shadow: 0 0 10px 1px #AFBCFF inset;
  color: $white;
  span{
    color: $white;
  }
}
::v-deep .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: #AFBCFF;
}
</style>

 即可得到想要的结果：

综上所述，举一反三，当我们遇到element-ui中无法修改的样式时，先去官网：Element - The world's most popular Vue UI framework查阅它是否有popper-append-to-body属性，如果有 将该属性置为false再试试，再不行的话，要么换组件，要么换组件库吧。