el-select 默认选中值及自定义样式

 1.默认选中值

<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="项目状态:" prop="status">
        <el-select :disabled="isRead" v-model="form.status" class="mySelect" popper-class="wentipingSelectPopper" placeholder="请选择项目状态"
        style="width: 169px;margin-right:20px;">
        <el-option  v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label"></el-option>
      </el-select>
    </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        code: 0,
        form: {
          status: ''
        },
        isRead: true,
        statusList: [
          {
            value: '0',
            label: '未完成'
          },
          {
            value: '1',
            label: '已完成'
          },
        ],
      }
    },
    created () {
      this.form.status = this.statusList[0].value;
    },
  }
</script>

<style  scoped>

</style>

效果图：

element-ui 解决 el-select 设置初始默认值后切换选项无效问题_sea9528的博客-CSDN博客_el-select设置默认值

 2.el-selet自定义样式

效果图：

<div class='chooseItem '>
<el-select
                v-model="todayTarget"
                placeholder=""
                class="mySelect"
                popper-class="mySelectPopper"
              >
                <el-option
                  v-for="item in todayTargetList"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
</div>

.chooseItem {
  height: 60px;
  line-height: 60px;
}
.el-select-dropdown .el-select-dropdown__item.hover { // 下拉hover上去的背景色
  background-color: #012049 !important;
}
.el-select-dropdown { //下拉的背景色
  background: #00122a !important;
  border: 1px solid #83929d !important;
}

.mySelect .el-input__inner {
  font-size: 24px !important;
  text-align: center;
  background: rgba(80, 136, 151, 0.1) !important;
  border: transparent !important;
  border-radius: 12px !important;
  color: #ffffff;
  cursor: pointer;
  height: 100% !important;
  line-height: 100% !important;
}

.mySelect {
  //width: 180px;
  //height: 100%; //同父级一样高
  //background: url("../../public/static/img/web/year_target_bg.png")
    no-repeat;

  height: 45px !important;
  width: 100px; // 宽高
  border-radius: 4px; 
  border: 1px solid #05658c !important; //边框
  background-color: #042237 !important;
}

.mySelectPopper {
  border: 1px solid #3062ff;
  background-color: #00122a;
}
.mySelectPopper .el-select-dropdown__item.hover {
  background-color: #14265d;
}
.mySelectPopper .el-select-dropdown__item.hover {
  color: #ffffff;
}
.mySelectPopper .el-input__inner {
  height: 40px;
  line-height: 40px;
}
.mySelectPopper .el-select-dropdown__item {
  color: #97bffc;
  font-size: 24px !important;
  height: 50px;
  line-height: 50px;
}
.el-select-dropdown {
  background: #1f3b53 !important;
  border: 1px solid #83929d !important;
}
.mySelectPopper .popper__arrow::after {
  border-bottom-color: #97bffc !important;
}
.mySelectPopper .popper__arrow {
  border-bottom-color: #3062ff !important;
}

.el-select
  .el-input
  .el-select__caret.el-input__icon::before {
  content: "\e790" !important;
  color: #02bff4;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.el-select .el-input .el-select__caret {
  transform: rotateZ(0deg) !important;
}