vue3 el-autocomplete下拉加载更多

### 实现 Vue3 中 Element Plus 的 `el-autocomplete` 组件下拉加载更多数据 在 Vue3 和 Element Plus 中实现 `el-autocomplete` 组件的下拉加载更多功能，可以通过监听滚动事件来检测何时到达列表底部并触发新的数据请求。下面是一个完整的解决方案。 #### HTML 结构 定义 `el-autocomplete` 组件，并设置必要的属性： ```html <template> <div style="width: 300px;"> <el-autocomplete ref="autocomplete" v-model="searchText" :fetch-suggestions="querySearchAsync" placeholder="请输入关键词" @select="handleSelect"> </el-autocomplete> </div> </template> ``` #### JavaScript 方法 编写用于处理异步查询和分页逻辑的方法： ```javascript <script setup> import { ref, onMounted } from 'vue'; const searchText = ref(''); const page = ref(1); const pageSize = ref(10); // 模拟获取远程数据函数 async function fetchData(keyword, pageNum) { // 这里可以替换为实际 API 请求 const response = await fetch(`/api/search?keyword=${encodeURIComponent(keyword)}&page=${pageNum}&size=${pageSize.value}`); return await response.json(); } function querySearchAsync(queryString, cb) { if (queryString === '') { cb([]); return; } fetchData(queryString, page.value).then((data) => { setTimeout(() => { cb(data.items.map(item => ({ value: item.name }))); }, 200); }); } onMounted(() => { document.addEventListener('scroll', handleScroll); }); function handleScroll(event) { const target = event.target.scrollingElement || document.documentElement; if ((target.scrollHeight - target.scrollTop - window.innerHeight) < 50 && !loadingMoreData.value) { loadingMoreData.value = true; page.value++; fetchData(searchText.value, page.value).then((newItems) => { newItems.forEach(newItem => suggestions.value.push({value: newItem.name})); loadingMoreData.value = false; }).catch(error => console.error('Error fetching more data:', error)); } } </script> ``` 上述代码实现了当用户滚动接近页面底端时自动发起新一页的数据请求[^2]。需要注意的是，在真实环境中应当根据实际情况调整API调用方式以及错误处理机制。 此外，对于样式方面如果希望自定义下拉菜单的位置或外观，则需注意设置`:popper-append-to-body="false"`以便于更好地控制DOM结构中的位置关系[^3]。