Element下拉框?qū)崿F(xiàn)滾動加載更多功能實現(xiàn)
需求：下拉框默認顯示20條數(shù)據(jù)奈附，可使用遠程搜索為顯示的數(shù)據(jù)缚够，但是部分用戶喜歡滾動選擇隔缀。
如圖所示题造，el-select官方事件并沒有監(jiān)聽滾動的事件，所以我們可以采用vue的directives自定義指令實現(xiàn)蚕泽。
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=“加載事件名”即可實現(xiàn)
<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>
注意：其他細節(jié)自行注意晌梨，例如加載到底或者下拉框有聯(lián)動等。
