el-autocomplete当值是空的时候不要加载旋转图标
时间: 2024-04-10 11:26:50 浏览: 19
要实现当值为空时不显示加载旋转图标,你可以通过设置 `show-loading` 属性来控制旋转图标的显示。以下是一个示例代码:
```html
<template>
<el-autocomplete
v-model="inputValue"
placeholder="请输入关键词"
:fetch-suggestions="fetchSuggestions"
:show-loading="showLoading"
>
<template slot="default" slot-scope="{ item }">
<span>{{ item }}</span>
</template>
</el-autocomplete>
</template>
<script>
export default {
data() {
return {
inputValue: '',
showLoading: false
};
},
methods: {
fetchSuggestions(queryString, callback) {
if (queryString !== '') {
this.showLoading = true;
// 发起远程请求获取数据
// 你可以使用 axios 或其他 HTTP 库来发送请求
// 假设请求的接口是 /api/search,返回的数据是一个包含结果的数组
axios.get('/api/search', { params: { query: queryString } })
.then(response => {
const suggestions = response.data;
this.showLoading = false;
callback(suggestions);
})
.catch(error => {
console.error(error);
this.showLoading = false;
});
} else {
this.showLoading = false;
callback([]);
}
}
}
};
</script>
```
在上面的代码中,我们使用了 `show-loading` 属性来控制加载旋转图标的显示。当输入框的值不为空时,我们将 `showLoading` 设置为 `true`,显示加载旋转图标;当输入框的值为空时,我们将 `showLoading` 设置为 `false`,不显示加载旋转图标。
在 `fetchSuggestions` 方法中,我们根据输入框的值来判断是否要发起远程请求。如果输入框的值不为空,我们发送请求并在请求完成后将 `showLoading` 设置为 `false`;如果输入框的值为空,我们直接将 `showLoading` 设置为 `false`,并回调一个空的结果数组。
这样,当输入框的值为空时,不会显示加载旋转图标。