4dkankan-components/docs/examples/transfer/filterable.vue

<template>
    <el-transfer v-model="value" filterable :filter-method="filterMethod" filter-placeholder="State Abbreviations" :data="data" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Option {
    key: number
    label: string
    initial: string
}

const generateData = () => {
    const data: Option[] = []
    const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut ']
    const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
    states.forEach((city, index) => {
        data.push({
            label: city,
            key: index,
            initial: initials[index],
        })
    })
    return data
}

const data = ref<Option[]>(generateData())
const value = ref([])

const filterMethod = (query, item) => {
    return item.initial.toLowerCase().includes(query.toLowerCase())
}
</script>