效果图

具体实现

<template><div class="home"><el-selectref="currencySelect"v-model="currency"filterable:spellcheck="false"placeholder="请选择":filter-method="handleCurrencyFilter"@change="handleCurrencyChange"@visible-change="handleCurrencyVisible"style="width: 240px;"><el-optionv-for="(item, index) in currencyOptions":key="index":label="item.label":value="item.label"><span style="float: left">{{ item.label }}</span><spanv-if="item.value !== ''"style="float: right; color: #8492a6; font-size: 13px;margin-left: 15px;">{{ item.nation }}</span></el-option></el-select></div>
</template><script setup>
import { ref, reactive, computed, onMounted } from "vue"
let currency = ref('')
let currencyOld = ref('')
let flag = ref(false)
const currencySelect = ref(null)
let dataList = reactive([{ label: 'CNY', value: 'CNY', nation: '中国'},{ label: 'USD', value: 'USD', nation: '美国'},{ label: 'EUR', value: 'EUR', nation: '欧盟'},{ label: 'JPY', value: 'JPY', nation: '日本'},{ label: 'GBP', value: 'GBP', nation: '英国'},{ label: 'AUD', value: 'AUD', nation: '澳大利亚'},{ label: 'CHF', value: 'CHF', nation: '瑞士'},{ label: 'CAD', value: 'CAD', nation: '加拿大'},{ label: 'NZD', value: 'NZD', nation: '新西兰'},{ label: 'SGD', value: 'SGD', nation: '新加坡'},{ label: 'HKD', value: 'HKD', nation: '香港'},{ label: 'TWD', value: 'TWD', nation: '台湾'},{ label: 'SEK', value: 'SEK', nation: '瑞典'},{ label: 'DKK', value: 'DKK', nation: '丹麦'},{ label: 'NOK', value: 'NOK', nation: '挪威'},{ label: 'HUF', value: 'H}UF', nation: '匈牙利'},{ label: 'PLN', value: 'PLN', nation: '波兰'},{ label: 'RUB', value: 'RUB', nation: '俄罗斯'},{ label: 'BRL', value: 'BRL', nation: '巴西'},{ label: 'MXN', value: 'MXN', nation: '墨西哥'},{ label: 'ZAR', value: 'ZAR', nation: '南非'},{ label: 'TRY', value: 'TRY', nation: '土耳其'},{ label: 'INR', value: 'INR', nation: '印度'},{ label: 'IDR', value: 'IDR', nation: '印度尼西亚'},{ label: 'MYR', value: 'MYR', nation: '马来西亚'},{ label: 'PHP', value: 'PHP', nation: '菲律宾'},{ label:'THB', value: 'THB', nation: '泰国'},{ label: 'KRW', value: 'KRW', nation: '韩国'},{ label: 'VND', value: 'VND', nation: '越南'},{ label: 'HKD', value: 'HKD', nation: '香港'},{ label: 'KPW', value: 'KPW', nation: '朝鲜'}
])
let currencyOptions = ref([])const getData = () => {currencyOptions.value = dataList
}
// 自定义搜索方法
const handleCurrencyFilter = (query) => {// 如果搜索关键字为空，则恢复搜索前的值currency.value = query ? query : currencyOld.valuecurrencyOptions.value = dataList.filter(v => {return v.label.indexOf(query.toUpperCase()) > -1 || v.nation.indexOf(query) > -1})
}
// 选中值发生变化时触发
const handleCurrencyChange = (val) => {flag.value = truecurrencyOld.value = valcurrencySelect.value.blur()// 延时，避免搜索后下拉列表恢复全量数据时高度闪现setTimeout(() => {currencyOptions.value = [...dataList]}, 150)
}
// 下拉框出现/隐藏时触发
const handleCurrencyVisible = (visible) => {if (!visible) {// 下拉框隐藏时， 如果没有选择新的值则恢复搜索前的值if (!flag.value) currency.value = currencyOld.valuecurrencySelect.value.blur()} else {flag.value = false}
}
onMounted(() => {getData()
})
</script>
<style scoped lang="less">
.home {display: flex;justify-content: center;
}
</style>