el-autocomplete 添加加载动画

`el-autocomplete` 是 Element UI 中的一个组件，它是一个自动完成输入框，用于提供实时搜索建议。在处理远程数据加载时，为了增加用户体验，我们通常会在用户开始输入并触发请求时添加一个加载动画。在 Vue.js 中，可以采用以下步骤来实现在搜索时显示加载状态：

1. 首先，在模板上设置一个 `v-loading` 属性，该属性来自 Element UI 的 Loading 组件，当值为 true 时显示加载效果。例如：

<template>
  <el-autocomplete
    v-model="searchValue"
    :fetch-suggestions="querySearch"
    placeholder="请输入搜索内容"
    loading="loading"
  ></el-autocomplete>
</template>

2. 然后，在 JavaScript 中，当搜索请求开始时设置 `loading = true`，查询结束后设置回 false：

export default {
  data() {
    return {
      searchValue: '',
      loading: false,
      // 其他数据
    };
  },
  methods: {
    querySearch(query) {
      this.loading = true; // 开始加载
      // 这里模拟异步搜索，实际应用中替换为网络请求
      setTimeout(() => {
        const suggestions = ['搜索结果1', '搜索结果2']; // 搜索返回的结果
        this.$emit('select', suggestions); // 触发选择事件，传递数据给父组件
        this.loading = false; // 结束加载
      }, 500);
    }
  }
};