直接看代码吧，可以直接粘贴此代码到你的编辑器中看效果。
<template>
<div class="page-component">
<div class="container">
<el-select
v-model="value"
placeholder="请选择"
-loadmore="loadMore" >
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import Vue from 'vue';
Vue.directive('loadmore', {
bind(el, binding) {
// 获取element-ui定义好的scroll盒子
const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
SELECTWRAP_DOM.addEventListener('scroll', function() {
/*
* scrollHeight 获取元素内容高度(只读)
* scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
* clientHeight 读取元素的可见高度(只读)
* 如果元素滚动到底, 下面等式返回true, 没有则返回false:
* ele.scrollHeight - ele.scrollTop === ele.clientHeight;
*/
const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
if(CONDITION) {
binding.value();
}
});
}
})
export default {
methods: {
loadMore() {
console.log(2222) // 这里可以做你想做的任何事
},
},
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
},{
value: '选项6',
label: '黄金糕'
}, {
value: '选项7',
label: '双皮奶'
}, {
value: '选项8',
label: '蚵仔煎'
}, ],
value: ''
};
},
}
</script>