element-ui中select的下滑加载更多

1、首先给 el-select 绑定一个事件，这个事件 element 是不支持的，所以要自己定义一个属性：

directives: {

‘el-select-loadmore’: {

inserted(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、在el-select中绑定这个属性, loadmore 就是你的逻辑

// 你的代码

3、loadmore 中写自己的逻辑

当鼠标滑到 option 下面的时候，就会触发 loadmore 函数，就可以实现鼠标下拉加载更多。

作者：前端小白_星辰
链接：https://www.jianshu.com/p/623b82fbfa33
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。