el-select下拉箭头改成实心三角

1、vue3中写一个三角组件IconDropDown.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<template>   <div class="down-icon"></div> </template> <style lang="scss" scoped> .down-icon {   display: flex;   justify-content: center;   align-items: center; } .down-icon::before {   display: inline-block;   width: 0;   height: 0;   content: "";   border-top: 5px solid rgb(134 144 156);   border-right: 5px solid transparent;   border-left: 5px solid transparent; } </style>

引入并使用组件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<el-select          v-model="formState.salary"          placeholder="职位薪资"          style="width: 300px;"          clearable          :suffix-icon="IconDropDown"          @change="getJobsFn"        >          <el-option            v-for="item in salaryList"            :key="item.id"            :label="item.name"            :value="item.id"          />        </el-select><br><br>

import IconDropDown from '@/components/IconDropDown.vue'

联级选择器

.search-box-el {
  .el-input__inner::placeholder,
  .el-select__placeholder {
    color: rgb(29, 33, 41) !important;
  }
  .el-cascader {
    border-radius: 6px;

    .el-input__wrapper {
      background: rgb(247 248 250);
      border: 0;
      box-shadow: none;
      .icon-arrow-down {
        svg {
          display: none;
        }
      }

      .icon-arrow-down::before {
        display: inline-block;
        width: 0;
        height: 0;
        content: "";
        border-top: 5px solid rgb(134 144 156);
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
      }
      &:hover {
        .icon-circle-close {
          svg {
            display: block;
          }
          .icon-arrow-down::before {
            display: none;
          }
        }
      }
    }
  }
}

2、vue2的方式

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

.search-box-el {   .el-input__inner {     height: 32px;     line-height: 32px;     background: rgb(247, 248, 250);     border: 0;   }    .el-input__inner::placeholder,   .el-select__placeholder {     color: rgb(29, 33, 41) !important;   }   .el-input__icon {     line-height: 100%;    }     .el-icon-arrow-up:before {     display: inline-block;     width: 0;     height: 0;     content: "";     border-bottom: 5px solid rgb(134 144 156);     border-right: 5px solid transparent;     border-left: 5px solid transparent;   } }