el-autocomplete使用方法

`el-autocomplete` 是 Element UI 提供的一个用于输入框自动补全功能的组件。它基于 Vue.js 开发，常用于搜索、建议等功能场景。以下是使用 `el-autocomplete` 的基本步骤：

1. 引入组件：首先需要在你的 Vue 项目中安装 Element UI，并引入 `el-autocomplete` 组件。例如，在 `main.js` 或其他入口文件里添加：

import { ElAutocomplete } from 'element-ui'
Vue.component('el-autocomplete', ElAutocomplete)

2. 注册并绑定到模板：然后在你的 Vue 实例模板中，创建一个 `<el-autocomplete>` 元素，并指定一些属性：

<template>
  <div>
    <el-autocomplete
      v-model="inputValue"
      placeholder="请输入关键词"
      :remote-method="search" <!-- 远程搜索方法 -->
      @select="handleSelect" <!-- 当用户选择一项时触发的事件 -->
      :trigger-on-focus="false" <!-- 控制是否在焦点获取时立即触发搜索 -->
    ></el-autocomplete>
  </div>
</template>

关键属性：
- `v-model`: 表单的值，通常绑定用户的输入。
- `remote-method`: 自定义的远程搜索函数，一般会发送 AJAX 请求获取数据。
- `@select`: 选择事件处理器，可以处理选中的项。

3. 定义数据和方法：在你的 Vue 实例中，定义 `inputValue` 和相关的数据管理以及搜索方法：

export default {
  data() {
    return {
      inputValue: '',
      // 根据实际需求填充远程搜索的数据源
      searchList: [],
    };
  },
  methods: {
    search(query) {
      // 使用输入值查询数据源
      this.$axios.get('/api/search', { params: { keyword: query } })
        .then(response => (this.searchList = response.data))
        .catch(error => console.error(error));
    },
    handleSelect(item) {
      // 处理选中的 item
      console.log('Selected:', item);
    },
  },
};