Element下拉框实现滚动加载更多功能实现
需求：下拉框默认显示20条数据，可使用远程搜索为显示的数据，但是部分用户喜欢滚动选择。
如图所示，el-select官方事件并没有监听滚动的事件，所以我们可以采用vue的directives自定义指令实现。
el-selectEvents.png
首选在src也就是main.js的同级目录下新建一个directives.js文件
import Vue from 'vue'
let MyDirective = {}
export default MyDirective.install = function(vue, options) {
Vue.directive('loadmore', {
bind (el, binding) {
const selectDom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
selectDom.addEventListener('scroll', function () {
const isEnd = this.scrollHeight - this.scrollTop <= this.clientHeight
if (isEnd) {
binding.value()
}
})
}
})
}
在main.js中引入并注册
import directives from './directives'
// 全局注册指令
Vue.use(directives)
index.vue 在下拉框中加入v-loadmore=“加载事件名”即可实现
<el-select
v-loadmore="loadPartner"
v-model="listQuery.partner_id"
placeholder="请选择或搜索团队"
filterable clearable
:filter-method="searchPartner"
@change="handleFilter"
@clear="searchPartner('',false)"
@blur="searchPartner('')"
class="input-item">
<el-option
v-for="item in partners"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
注意：其他细节自行注意，例如加载到底或者下拉框有联动等。
