VUE+ElementUI中為el-select添加滾動加載事件

VUE+ElementUI中為el-select添加滾動加載事件

• 當一個下拉框的數據有很多時，如果我們直接把所有的數據渲染出來，肯定是不現實的，不僅加載慢還影響性能，所以需要對下拉框做滾動加載的處理

知識拓展 Vue.directive(id, [definition])，注冊或獲取全局指令，不做過多解釋

• 添加滾動加載事件，就需要注冊一個全局指令

// 注冊滾動條加載觸發事件v-loadmore綁定
// 直接在 main.js 中引入即可
Vue.directive('loadmore', {
  bind (el, binding) {
    // 獲取element-ui定義好的scroll盒子
    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()
      }
    })
  }
})

• 下面附上官方用法

// 注冊
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注冊 (指令函數)
Vue.directive('my-directive', function () {
  // 這里將會被 `bind` 和 `update` 調用
})

// getter，返回已注冊的指令
var myDirective = Vue.directive('my-directive')

參考自定義指令

指令定義完了，具體怎么用呢

// 在el-select組件里面使用
<el-select
  v-model="incomValue"
  filterable  // 開啟搜索
  clearable // 清空
  remote  // 開啟遠程搜索
  v-loadmore="incomLoadmore"  // 觸底滾動加載事件
  :loading="loading"
  :remote-method="remoteMethod" // 遠程搜索
  @change="incomChange" // 值改變事件
  @clear="incomClear" // 清空事件
>
  <el-option
    v-for="item in incomList"
    :key="item.fdictionaryDetailedID"
    :value="item.fname"
    :label="item.fname"
  />
</el-select>
// 在對應的事件中執行對應的方法，每次觸底新加載一頁
// 下拉框滾動加載完成