<template> <div class="dropdown-search"> <el-select v-model="selectedItem" filterable remote :remote-method="handleSearch" :loading="loading" placeholder="输入关键字进行搜索" style="width: 200px" > <el-option v-for="item in filteredItems" :key="item.id" :label="item.name" :value="item.id" /> </el-select> </div> </template> <script> import { ref, computed } from 'vue'; import { ElSelect, ElOption } from 'element-plus'; export default { name: 'DropdownSearch', components: { ElSelect, ElOption, }, props: { items: { type: Array, required: true, }, }, setup(props) { const searchTerm = ref(''); const selectedItem = ref(null); const loading = ref(false); const handleSearch = (searchValue) => { searchTerm.value = searchValue; loading.value = true; // 模拟异步请求 setTimeout(() => { loading.value = false; }, 1000); }; const filteredItems = computed(() => { return props.items.filter((item) => item.name.toLowerCase().includes(searchTerm.value.toLowerCase()) ); }); return { searchTerm, selectedItem, loading, handleSearch, filteredItems, }; }, }; </script> <style scoped> .dropdown-search { display: flex; justify-content: center; align-items: center; height: 100%; } </style>
标签：tempCode,loading,const,value,props,searchTerm,ref From： https://www.cnblogs.com/huangshiyun/p/17846207.html