【element-ui】el-autocomplete实现 无数据匹配

---

在使用 Element UI 的 el-autocomplete 组件时，如果你希望在没有任何数据匹配的情况下显示特定的内容，你可以通过自定义模板或者通过插槽（slot）来实现。下面我将提供两种方法来实现当没有数据匹配时显示自定义内容。

方法一：使用 default 插槽

el-autocomplete 组件提供了一个 default 插槽，你可以在这个插槽中定义当没有匹配项时显示的内容。

<template>
  <el-autocomplete
    popper-class="my-autocomplete"
    v-model="query"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @select="handleSelect">
    <template slot="default" slot-scope="{ item }">
      <div v-if="item">{{ item.value }}div>
      <div v-else>没有找到匹配的数据div>
    template>
  el-autocomplete>
template>
 
<script>
export default {
  data() {
    return {
      query: ''
    };
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString ? this.filterData(queryString) : [];
      // 如果没有数据，你可以在这里处理，比如在回调中返回一个特定的对象或字符串
      if (results.length === 0) {
        cb([{ value: '没有找到匹配的数据' }]);
      } else {
        cb(results);
      }
    },
    filterData(queryString) {
      // 这里应该是你的过滤逻辑，返回匹配的数据数组
      return [{ value: '示例数据' }]; // 示例数据，根据实际情况填充
    },
    handleSelect(item) {
      console.log(item);
    }
  }
};
script>

方法二：使用 empty-text 属性（适用于列表类型）

如果你使用的是下拉列表（如 el-select），可以使用 empty-text 属性来设置没有数据时的显示文本。但 el-autocomplete 主要用于输入建议，并不直接支持 empty-text。不过，你可以通过自定义下拉列表的样式来间接实现类似的效果。例如：

<el-autocomplete
  v-model="query"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容">
  <template slot="default" slot-scope="{ item }">
    <div>{{ item.value }}div>
  template>
el-autocomplete>

在 CSS 中添加样式来处理空状态：

.el-autocomplete-suggestion__wrap {
  min-height: 40px; /* 根据需要调整 */
}
.el-autocomplete-suggestion__list {
  padding: 0; /* 根据需要调整 */
}
.el-autocomplete-suggestion__list li {
  padding: 10px; /* 根据需要调整 */
}
.el-autocomplete-suggestion__list li:empty::before {
  content: "没有找到匹配的数据"; /* 设置没有数据时的显示内容 */
  color: #999; /* 根据需要调整颜色 */
}

注意：上面的 CSS 方法依赖于 li 元素为空时使用 ::before 伪元素来添加内容，这种方法在某些情况下可能不够稳定，特别是在动态内容更新时。更好的方式是直接在 default 插槽中处理无数据的情况。

总结

总之，最推荐的方式是使用第一种方法，通过 default 插槽来灵活控制无匹配数据时的显示内容。这样可以更直接地控制 UI 的表现和逻辑。