Utilisation du contrôle el-autocomplete dans le projet Vue3 + ElementPlus

Préface

Ce contrôle el-autocomplete est assez simple à utiliser ! Dans le cas d'une grande quantité de données, il peut remplacer le contrôle el-select sans provoquer de décalage. De plus, j'ai constaté que lorsque la version element-plus était 2.2.32, l'attribut clearable de ce contrôle n'était pas valide. Lors de l'utilisation de la dernière version 2.3.9, cet attribut prenait effet. Ce bug devrait être corrigé.

Portail : Zone de saisie de saisie semi-automatique | Element Plus

1. Exemple de code

（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>

2. Effet de fonctionnement