修改element-ui的下拉框的样式

340 阅读1分钟

截图.png

项目需求,将下拉框改成如图的样式
<el-select v-model="seletValue" placeholder="" @change="getValue($event)" popper-class="operateDropOption" 
              :popper-append-to-body="false">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                //文字前面的图片
                <img :src="
                    item.selet==1
                      ? require('@/assets/images/皮带1.svg')
                      : require('@/assets/images/皮带2.svg')"
                   style="margin-right: 5px;vertical-align: middle;">
                   //文字后面的图片
                <img src="@/assets/images/皮带2.svg" alt="" style="margin-right: 5px;vertical-align: middle;" :selet="item.selet ? 2 : ''"> -->
                //中间的文字
                <span>{{item.label}}</span>
                <img :src="
                    item.selet==1
                      ? ' '
                      : require('@/assets/images/手.svg')"
                   style="margin-left: 15px;vertical-align: middle;">
                </el-option>
              </el-select>
data() {
    return {
    seletValue: "暂无数据",
    options: [
        { value: '选项1', label: '黄金糕',selet:1 },
        { value: '选项2', label: '双皮奶',selet:1  }, 
        { value: '选项3', label: '蚵仔煎',selet:1 },
        { value: '选项4', label: '龙须面',selet:1  }, 
        { value: '选项5', label: '北京烤鸭',selet:1  }
    ],
    }
   }
   methods: {
   getValue(val) {
      this.options.map((item)=>{
       //当选中当前的列时,图标变色,要重新给一个值
        if(item.value==val){
          item.selet=2
        }else{
          item.selet=1
        }
      })
    },
   }
   
   <style lang="scss">
//下拉框的样式的改变
    .operateDropOption{
      border: none;
      //滚动条样式的改变
      .el-scrollbar__thumb{
        background: linear-gradient(left,rgba(20, 137, 251, 1), rgba(141, 201, 255, 1));
      }
    .el-select-dropdown{
      border: none;
      padding-bottom:10px;
      background: RGBA(20, 31, 59, 1);
    }
    .el-scrollbar__wrap{
      background: RGBA(20, 31, 59, 1);
    }

    .el-select-dropdown__item{
      color: #fff;
      text-align: left;
      text-indent: 20px;
    }
    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
      background-color: RGBA(15, 23, 46, 1);
    }
    .el-select-dropdown__item.selected {
      color: #409EFF;
    }
    //三角的样式的改变
    &.el-popper .popper__arrow{
      left: 50% !important;
    }
    &.el-popper .popper__arrow::after {
      border-bottom-color: RGBA(20, 31, 59, 1);
      top: -14px;
      border-width: 10px;
    }
    &.el-popper .popper__arrow {
      border-bottom-color: transparent; 
    }
  }