vue3 数据可视化大屏项目中，设计师会设置类似下图的效果，这里我们使用element-plus的el-select来实现我们想要的效果，不过el-select使用的是字体图标，我们需要对其进行修改

版本号

"element-plus": "2.2.28",

关键代码

我们需要先给el-select定义一个class样式el-selectedBody2避免对其他的el-select样式造成样式污染

  <div class="el-selectedBody1">
    <el-select @change="getData" popper-class="el-selectedBody3" :model-value="active" class="el-selectedBody2"
               placeholder="请选择">
      <el-option
          v-for="item in list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
  </div>

.el-selectedBody2 {
  .el-input__suffix-inner {
    i {
      background: url("./assets/icon_down.png") center center no-repeat;
      background-size: 10px 6px;
      width: 10px;
      height: 6px !important;

      svg {
        display: none !important;
      }
    }
  }
}

完整实例代码

<template>
  <div class="el-selectedBody1">
    <el-select @change="getData" popper-class="el-selectedBody3" :model-value="active" class="el-selectedBody2"
               placeholder="请选择">
      <el-option
          v-for="item in list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
  </div>
</template>
<script>

export default {
  name: "elselect",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    active: {
      type: [Number, String],
      default() {
        return 0;
      }
    },
  },
  data() {
    return {}
  },
  methods: {
    getData(e) {
      this.$emit('update:active', e)
    }
  },
}
</script>

<style lang="scss" scoped>
.el-selectedBody1 {
  width: 100px;
  height: 27px;
  border: 1px solid #7E90B1;
  border-radius: 14px;
}

:deep(.el-selectedBody2) {
  .el-input__wrapper {
    background: none;
    height: 28px;
    box-shadow: 0 0 0 0px #fff inset !important;
    outline: none;

    .el-input__inner {
      font-size: 14px;
      font-family: MiSans;
      font-weight: 400;
      color: #FFFFFF;
    }
  }
}

</style>
<style lang="scss">
.el-selectedBody3 {
  .el-scrollbar {
    background-color: #061f41;
    border: 1px solid #084079;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: #107ca6 !important;
  }

  .el-select-dropdown__item {
    border: none !important;
  }

  .el-popper__arrow::before {
    border: 1px solid #409eff !important;
    background: #409eff !important;
    right: 0;
  }
}

.el-selectedBody2 {
  .el-input__suffix-inner {
    i {
      background: url("./assets/icon_down.png") center center no-repeat;
      background-size: 10px 6px;
      width: 10px;
      height: 6px !important;

      svg {
        display: none !important;
      }
    }
  }
}

.el-select {
  --el-select-input-focus-border-color: none !important;
}
</style>

使用

<selected :list="tabList" v-model:active="active"></selected>

data() {
    return {
      active: 1,
      tabList: [{
        value: 1,
        label: '全市'
      }, {
        value: 2,
        label: '全县'
      }],
    }
  },