添加vue指令loadMore
Vue.directive('loadMore', {
// el-select 滚动到底部
inserted: (el, binding) => {
const SelectWrap = el.querySelector('.el-select-dropdown__wrap');
function handleScroll() {
const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
if (condition) {
binding.value();
}
}
SelectWrap.addEventListener('scroll', handleScroll);
}
});
使用:记得将popper-append-to-body设置为false,否则获取不到DOM
<el-select
v-model="value"
v-load-more="loadMore"
v-loading="loading"
:popper-append-to-body="false"
filterable
@change="handleChange">
<el-option
v-for="(i,index) in list"
:key="i.id"
:label="i.name"
:value="i.name">
</el-option>
</el-select>
loadMore函数
loadMore() {
// 获取数据逻辑
console.log('到底了');
},