vue2 中实现el-autocomplete 下拉加载更多
时间: 2023-11-27 12:54:10 浏览: 32
在 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` 下拉加载更多的示例代码。