vue中el-select选择器实现触底加载,通过自定义指令(directives)实现
1.使用自定义指令
v-XXXX
// 初始化我是默认展示20条数据
<el-select
v-model="rechargeFormData.memberId"
// 此处绑定自定义指令
v-loadMore="loadMore"
// 可清空数据
clearable
filterable
>
<el-option v-for="item in showMemberData" :label='item.name' :value="item.id" :key="item.id"></el-option>
</el-select>
2.自定义指令
export default {
directives: {
loadMore: {
// el 可以获取当前dom节点, binding一个对象(具体可以自行打印观察),vnode第三个参数为虚拟节点
bind (el, binding) {
// 获取element,定义scroll
const selectDom: any = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
// 添加滚动事件
selectDom.addEventListener('scroll', function () {
// scrollHeight所有数据占据面的一个高度,,scrollTop滚动条滚走的区域高度,clientHeight可视区域面积高度
const height = selectDom.scrollHeight - selectDom.scrollTop <= selectDom.clientHeight;
if (height) {
binding.value();
}
});
}
}
}
3.自定义事件,滚动条触底时触发
loadMore () {
if (this.memberDataCopy.length !== this.allMemberTotal) {
// 触底开启加载状态
this.loading = true;
const params = {
size: this.size += 10,
currentPage: this.currentPage
};
// 延迟了500毫秒调接口拿数据
setTimeout(async () => {
const data = await getConsumerList(params);
this.memberDataCopy = data.records;
this.showMemberData = data.records;
// 拿到数据后关闭加载状态
this.loading = false;
}, 500);
}
}