Element-ui Select选择器自定义搜索方法

效果图

具体实现

<template>
  <div class="home">
    <el-select
      ref="currencySelect"
      v-model="currency"
      filterable
      :spellcheck="false"
      placeholder="请选择"
      :filter-method="handleCurrencyFilter"
      @change="handleCurrencyChange"
      @visible-change="handleCurrencyVisible"
      style="width: 240px;"
    >
      <el-option
        v-for="(item, index) in currencyOptions"
        :key="index"
        :label="item.label"
        :value="item.label"
      >
        <span style="float: left">{{ item.label }}</span>
        <span
          v-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.value
  currencyOptions.value = dataList.filter(v => {
    return v.label.indexOf(query.toUpperCase()) > -1 || v.nation.indexOf(query) > -1
  })
}
// 选中值发生变化时触发
const handleCurrencyChange = (val) => {
  flag.value = true
  currencyOld.value = val
  currencySelect.value.blur()
  // 延时，避免搜索后下拉列表恢复全量数据时高度闪现
  setTimeout(() => {
    currencyOptions.value = [...dataList]
  }, 150)
}
// 下拉框出现/隐藏时触发
const handleCurrencyVisible = (visible) => {
  if (!visible) {
    // 下拉框隐藏时， 如果没有选择新的值则恢复搜索前的值
    if (!flag.value) currency.value = currencyOld.value
    currencySelect.value.blur()
  } else {
    flag.value = false
  }
}
onMounted(() => {
  getData()
})
</script>
<style scoped lang="less">
.home {
  display: flex;
  justify-content: center;
}
</style>