在 Vue3 + ElementPlus 项目中使用 el-autocomplete 控件

前言

这个 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>

二、运行效果