问题:可以实现远程搜索,滚轮到底可以懒加载
解决方案:思路输入搜索全局请求,用分页解决,滚动到底增大显示页数量。
1、先自定义封装指令,滚轮到底的触发事件
创建elementScroll/index.js文件
import Vue from 'vue'
Vue.directive('loadmore', {
bind(el, binding) {
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
SELECTWRAP_DOM.addEventListener('scroll', function () {
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
if (CONDITION) {
binding.value()
}
})
}
})
2、引入到main.js中
import './elementScroll/index.js'
3、示例
<template>
<el-select
v-model="value"
v-loadmore="loadMore"
:filter-method="inputFoucs"
disabled
placeholder="请选择"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
}
],
value: "",
};
},
methods: {
loadMore() { // 触底事件
console.log(22);
},
inputFoucs(value) { // 输入时触发事件(这里建议加入防抖动)
console.log(value);
}
}
};
</script>
<style>
</style>