image.png
<template>
<el-select v-model="selectedValue" filterable :filter-method="selectFilter">
<el-option
v-for="(item, key) in options"
:key="item.key"
:label="item.label + '- ' + item.key"
:value="item.key"
>
</el-option>
</el-select>
</template>
<script setup>
const selectedValue = ref("");
const tempArray = ref([
{
key: "CNY",
label: "人民幣元",
},
{
key: "EUR",
label: "歐元",
},
{
key: "HKD",
label: "港元",
},
]);
const options = ref([]);
function selectFilter(val) {
// 判斷是否為空
if (val) {
// 同時篩選Lable與value的值
options.value = tempArray.value.filter((item) => {
return item.key.includes(val.toUpperCase()) || item.label.includes(val);
});
} else {
// 賦值還原
options.value = tempArray.value;
}
}
onMounted(() => {
options.value = tempArray.value;
});
</script>
