Element下拉框?qū)崿F(xiàn)滾動(dòng)加載更多功能實(shí)現(xiàn)

需求：下拉框默認(rèn)顯示20條數(shù)據(jù)，可使用遠(yuǎn)程搜索為顯示的數(shù)據(jù)，但是部分用戶喜歡滾動(dòng)選擇。

如圖所示，el-select官方事件并沒有監(jiān)聽滾動(dòng)的事件，所以我們可以采用vue的directives自定義指令實(shí)現(xiàn)。

el-selectEvents.png

首選在src也就是main.js的同級目錄下新建一個(gè)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=“加載事件名”即可實(shí)現(xiàn)

<el-select
  v-loadmore="loadPartner"
  v-model="listQuery.partner_id"
  placeholder="請選擇或搜索團(tuán)隊(duì)"
  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>

注意：其他細(xì)節(jié)自行注意，例如加載到底或者下拉框有聯(lián)動(dòng)等。