在Element UI中，使用el-autocomplete组件时，如果你想要添加无数据匹配时的提示信息，并且希望能够使用clearable特性清除已输入的内容，你需要监听clear事件并在事件处理函数中处理无数据匹配的逻辑。
以下是一个简单的例子，展示了如何实现这个功能：
<template>
<el-autocomplete
v-model="state.searchText"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@clear="handleClear"
clearable>
</el-autocomplete>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
searchText: '',
suggestions: ['测试1', '测试2', '测试3']
});
// 监听clear事件
const handleClear = () => {
state.searchText = '';
};
// 模拟查询方法
const querySearch = (queryString, cb) => {
let results = state.suggestions.filter(item => {
return item.includes(queryString.trim());
});
// 如果没有匹配项，显示提示信息
if (results.length === 0) {
results.push('无数据匹配');
}
cb(results);
};
return { ...toRefs(state), querySearch, handleClear };
}
};
</script>在这个例子中，我们定义了一个querySearch方法来模拟查询数据，并在方法中处理无数据匹配的逻辑。当用户清除输入时，handleClear方法会被调用，我们在这个方法中将searchText设置为空字符串，以清除提示信息。这样，无论是否有数据匹配，都不会触发clear事件外的其他问题。