对下列列表进行自定义 

基础代码

<template>
  <el-select
    class="ly-tab-sou"
    popper-class="popper-ly-tab-sou"
    v-model="selectVal"
    :filterable="filterable"
    :placeholder="placeholder"
    @change="selectChange"
  >
    <template #prefix v-if="prefix">
      <img src="@/assets/images/prices/search.svg" />
    </template>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

样式

样式修改

<style lang="less" scoped>
.ly-tab-sou {
  width: 225px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #404040;
  background: #121212;
  display: flex;
  align-items: center;
  :deep(.el-input__inner) {
    color: #fff;
  }
  :deep(.select-trigger) {
    width: 100%;
  }
  // :deep(.el-input__suffix) {
  //   .el-input__suffix-inner {
  //     .el-icon {
  //       background-image: url('@/assets/images/prices/arrow.svg');
  //       width: 6px;
  //       height: 4px;
  //       background-size: cover;
  //       svg {
  //         display: none;
  //       }
  //     }
  //   }
  // }
}
</style>

<style lang="less">
// .ly-tab-sou {
//   .el-input__suffix {
//     display: none;
//   }
// }
.popper-ly-tab-sou {
  --el-bg-color-overlay: #1f2328;
  --el-border-color-light: #30353c;
  .el-scrollbar {
    --el-fill-color-light: #484d56;
  }
  .el-popper__arrow {
    display: none;
  }
  .el-select-dropdown__item.selected {
    color: #31daff;
  }
  .el-select-dropdown__item {
    color: #eaecef;
  }
}
</style>

使用

<SearchSelect
          class="ly-tab-ssu"
          v-model="selectVal"
          :options="CurrencyList"
          :filterable="true"
          :prefix="true"
          placeholder="搜索"
          @onChangeSelect="selectChange"
        />


<script setup>
import { ref } from 'vue';
import SearchSelect from '@/views/Prices/components/SearchBar/SearchSelect.vue';
const selectVal = ref('');
const options = ref([
  {
    value: '选项1',
    label: '选项1'
  },
  {
    value: '选项2',
    label: '选项2'
  }
]);
const selectChange = (val) => {
  console.log('selectChange', val);
};
</script>

 代码封装

<!--
 * @Author: Jackie
 * @Date: 2023-09-15 14:44:13
 * @LastEditTime: 2023-09-15 15:02:11
 * @LastEditors: Jackie
 * @Description: 搜索下拉框
 * @FilePath: /src/views/components/SearchBar/SearchSelect.vue
 * @version: 
-->
<template>
  <el-select
    class="ly-tab-sou"
    popper-class="popper-ly-tab-sou"
    v-model="selectVal"
    :filterable="filterable"
    :placeholder="placeholder"
    @change="selectChange"
  >
    <template #prefix v-if="prefix">
      <img src="@/assets/images/prices/search.svg" />
    </template>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
import { ref, defineProps, defineEmits, computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: ''
  },
  options: {
    type: Array,
    default: () => []
    // [{label: '全部合约',value: 'all'}]
  },
  filterable: {
    type: Boolean,
    default: false
  },
  prefix: {
    type: Boolean,
    default: false
  },
  align: {
    type: String,
    default: 'right'
  },
  placeholder: {
    type: String,
    default: '搜索'
  }
});

const emits = defineEmits(['update:modelValue', 'onChangeSelect']);
const selectVal = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits('update:modelValue', val);
  }
});

const selectChange = (val) => {
  //   console.log('selectChange', val);
  emits('onChangeSelect', val);
};
</script>
<style lang="less" scoped>
.ly-tab-sou {
  width: 225px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #404040;
  background: #121212;
  display: flex;
  align-items: center;
  :deep(.el-input__inner) {
    color: #fff;
  }
  :deep(.select-trigger) {
    width: 100%;
  }
  // :deep(.el-input__suffix) {
  //   .el-input__suffix-inner {
  //     .el-icon {
  //       background-image: url('@/assets/images/prices/arrow.svg');
  //       width: 6px;
  //       height: 4px;
  //       background-size: cover;
  //       svg {
  //         display: none;
  //       }
  //     }
  //   }
  // }
}
</style>

<style lang="less">
// .ly-tab-sou {
//   .el-input__suffix {
//     display: none;
//   }
// }
.popper-ly-tab-sou {
  --el-bg-color-overlay: #1f2328;
  --el-border-color-light: #30353c;
  .el-scrollbar {
    --el-fill-color-light: #484d56;
  }
  .el-popper__arrow {
    display: none;
  }
  .el-select-dropdown__item.selected {
    color: #31daff;
  }
  .el-select-dropdown__item {
    color: #eaecef;
  }
}
</style>