在
Vue2
中实现 `el-
autocomplete` 下拉加载更多的方法可以通过监听 `input` 事件，在输入框
中输入字符时触发一个方法来获取更多的数据。当滚动到下拉框底部时，再次触发这个方法获取更多的数据。
下面是一个简单的示例代码：
```html
<template>
<el-
autocomplete v-model="keyword" :fetch-suggestions="querySearch" @select="handleSelect">
<template slot-scope="{ item }">
<div class="
autocomplete-item">{{ item }}</div>
<div v-if="isLastItem(item)">已经到底了</div>
</template>
</el-
autocomplete>
</template>
<script>
export default {
data() {
return {
keyword: '',
items: [
'Apple', 'Banana', 'Cherry', 'Durian', 'Elderberry', 'Fig', 'Grapefruit', 'Honeydew', 'Iced melon', 'Jackfruit'
],
pageSize: 5, // 每页数量
page: 1 // 当前页数
}
},
methods: {
querySearch(queryString, cb) {
const start = (this.page - 1) * this.pageSize
const end = start + this.pageSize
const results = this.items.slice(start, end)
if (end >= this.items.length) {
results.push('已经到底了')
}
cb(results)
},
handleSelect(item) {
if (this.isLastItem(item)) {
// 已经到底了
}
},
isLastItem(item) {
return item === '已经到底了'
}
},
watch: {
keyword(val) {
if (val) {
this.page = 1
this.querySearch(val, (results) => {
this.$refs.
autocomplete.suggestions = results
})
}
}
},
mounted() {
const input = this.$refs.
autocomplete.$refs.input
input.addEventListener('scroll', () => {
if (input.scrollHeight - input.scrollTop === input.clientHeight) {
// 到达底部
if (!this.isLastItem(this.$refs.
autocomplete.suggestions[this.$refs.
autocomplete.suggestions.length - 1])) {
this.page++
this.querySearch(this.keyword, (results) => {
this.$refs.
autocomplete.suggestions = this.$refs.
autocomplete.suggestions.concat(results)
})
}
}
})
}
}
</script>
```
在这个示例
中，我们在 `querySearch` 方法
中通过 `this.page` 和 `this.pageSize` 计算出当前需要展示的数据范围。如果已经到达数据末尾，我们返回一个特殊的字符串 `'已经到底了'` 作为提示。
在 `handleSelect` 方法
中，我们判断用户是否选择了最后一个提示项 `'已经到底了'`，如果是则停止加载更多数据。
在 `watch`
中，我们监听输入框的值变化，并调用 `querySearch` 方法获取第一页数据。
在 `mounted`
中，我们通过 `input.addEventListener('scroll')` 监听输入框的滚动事件，当滚动到底部时，判断当前的提示项是否为 `'已经到底了'`，如果不是则继续加载更多数据。注意要在 `this.$refs.
autocomplete.suggestions`
中使用 `concat` 方法将新的数据合并到已有的数据
中。
以上就是一个简单的实现 `el-
autocomplete` 下拉加载更多的示例代码。
889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
