当前位置：首页 > article >正文

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

article 2025/8/13 14:55:00

文章目录

方法一：使用 default 插槽
方法二：使用 empty-text 属性（适用于列表类型）
总结

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

方法一：使用 default 插槽

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

<template><el-autocompletepopper-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-autocompletev-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; /* 根据需要调整颜色 */
}