论el-select自定义样式的两种方式

第一种:<style scoped>

最终效果:

在<el-select>标签外用div包裹,添加类名select-style,在el-select标签上添加属性:popper-append-to-body="false",然后写在<style scoped>里面,修改的部分样式如下:

<div
                          class="select-style"
                        >
                          <el-select
                            v-model="ele.serviceName"
                            size="mini"
                            style="width: 80%; border: 1px solid #066fa5"
                            :popper-append-to-body="false"
                          >
                            <el-option
                              v-for="item in runningNodes"
                              :key="item.deviceName"
                              :label="item.deviceName"
                              :value="item.deviceName"
                            >
                            </el-option>
                          </el-select>
                        </div>

/** 修改select下拉框的样式 */
::v-deep .el-popper[x-placement^="bottom"] {
  background-color: #0a4680;
  border-color: #00d1ff;
}

::v-deep .el-select-dropdown__item {
  color: #fff;
}

::v-deep .el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
  color: #fff;
  background-color: #0b53979a;
}

::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #0a4680 !important;
}

::v-deep .el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #00d1ff;
}

::v-deep .el-select-dropdown__item.selected {
  color: #78ddec;
  background-color: #135ea3;
}
.select-style ::v-deep .el-select-dropdown {
  position: absolute !important;
}
.select-style ::v-deep .el-icon-arrow-up:before {
  content: "";
  width: 10px;
  height: 10px;
  background: url("/images/demonstration/room-create-img/select-click.png")
    center no-repeat;
  background-size: 100% 100%;
  transform: rotate(0deg);
}
.select-style ::v-deep .el-select .el-input__inner {
  border: none;
  background: url("/images/demonstration/common-img/input-notCheck.png")
    no-repeat;
  background-size: 100% 100%;
  color: #e0ecf5;
}

 第二种:<style>

最终效果:

具体代码:

<el-select
            v-model="form.effectFlag"
            placeholder="请选择"
            style="width: 99%"
            popper-class="intelligent-select1"
          >
            <el-option
              v-for="item in effectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

/** 修改select下拉框的样式 */
.intelligent-select1 {
  background-color: #252d4c;
  border: none;
}
.intelligent-select1 .el-select-dropdown__item {
  color: #fff;
}
.intelligent-select1 .el-select-dropdown__item:hover,
.el-select-dropdown__item.hover {
  color: #fff;
  background-color: #2d3452;
}
.intelligent-select1.el-popper[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: #252d4c;
}
.intelligent-select1.el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: #252d4c;
}
.intelligent-select1 .el-select-dropdown__item.selected {
  color: #fff;
  background-color: #313a5e;
}
/* 多选下拉框选中的样式 */
.intelligent-select1.el-select-dropdown .el-select-dropdown__item.selected {
  background-color: #3b4674;
  color: #fff;
  font-weight: bold;
  border-bottom: 1px solid #343d64;
}
/* 多选下拉框的最大高度 */
.intelligent-select1 .el-select-dropdown__list {
  max-height: 160px;
}