el-autocomplete没有匹配数据时通过css修改样式显示无匹配数据

在使用 Element UI 的 el-autocomplete 组件时，如果想要在没有匹配数据时通过 CSS 修改样式来显示“无匹配数据”的提示，可以通过监听 el-autocomplete 的 clear 事件来动态改变提示信息的显示。

以下是一个简单的示例：

首先，在模板中添加 el-autocomplete 组件和一个用于显示“无匹配数据”的元素：

<template>
  <el-autocomplete
    v-model="state.search"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @clear="handleClear"
  ></el-autocomplete>
  <div id="no-data-tip" :style="{ display: state.noDataTipDisplay }">无匹配数据</div>
</template>

然后，在 script 中添加对应的逻辑：

<script>
import { reactive, toRefs } from 'vue';
 
export default {
  setup() {
    const state = reactive({
      search: '',
      noDataTipDisplay: 'none',
    });
 
    const querySearch = (queryString, cb) => {
      // 模拟请求数据
      setTimeout(() => {
        cb([]); // 返回空数组模拟没有匹配的数据
      }, 100);
    };
 
    const handleClear = () => {
      state.noDataTipDisplay = 'block';
    };
 
    return { ...toRefs(state), querySearch, handleClear };
  },
};
</script>

最后，添加一些 CSS 样式来美化提示信息：

<style>
#no-data-tip {
  display: none;
  color: #909399;
  padding: 5px;
}
</style>

在这个示例中，当用户清除 el-autocomplete 中的输入时，handleClear 方法会被触发，它将 state.noDataTipDisplay 设置为 'block'，这样提示信息就会显示出来。通过监听 el-autocomplete 的 clear 事件，我们可以在用户清除输入时更改提示信息的显示状态。