前言
这个 el-autocomplete 控件颇为好用！在大量数据的情况下，其可以替换 el-select 控件，不会说卡顿得不行。另外，我发现当 element-plus 版本为2.2.32时，这个控件的 clearable 属性失效，在使用当前最新版本2.3.9时，这个属性起效了，应该是修复了这个 bug 了吧。
传送门：Autocomplete 自动补全输入框 | Element Plus
一、示例代码
（1）/src/views/Example/ElAutocomplete/index.vue
<template>
<div style="padding: 100px">
<el-autocomplete
size="small"
style="width: 250px"
v-model="game"
value-key="name"
:fetch-suggestions="handleGameSearch"
clearable
placeholder="请输入关键字"
@select="handleGameSelect"
/>
</div>
</template>
<script setup>
import {
onMounted, ref } from 'vue'
// 游戏
const game = ref('')
// 游戏列表
const gameList = ref([
{
id: 1, name: '暗黑破坏神2' },
{
id: 2, name: '国家崛起2' },
{
id: 3, name: '帝国时代4' },
{
id: 4, name: '红色警戒' },
{
id: 5, name: '肆狂神战纪' },
{
id: 6, name: '艾诺迪亚' },
{
id: 7, name: '地下城守护者2' },
])
// 查询
const handleGameSearch = (queryString, cb) => {
const restaurants = gameList
const results = queryString
? restaurants.value.filter(
(restaurant) => {
return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1)
}
)
: restaurants.value
cb(results)
}
// 选择
const handleGameSelect = (item) => {
console.log(item)
}
onMounted(() => {
// ...
})
</script>
二、运行效果
