在element-ui的select下拉框加上滾動加載

在項目中，咱們須要運用到不少來自後端返回的數據。有時是上百條，有時甚至上千條。若是加上後端的多表查詢或者數據量過大，這就致使在前端的顯示就會及其慢，特別是在網絡很差的時候更是如此。

天然，後端就作了一項很是「漂亮」的交互體驗數據——分頁

這不分頁還好，一分頁對超過10條數據以後的原本也很少，就20條，恰恰還得作個分頁器。（假設爲10條）

此時，若是可以像購物商城那樣拖拽到底部自動加載新數據就行了。

因而《在element-ui的select下拉框加上滾動加載》誕生了。

這裏經過自定義封裝vue指令進行封裝。（什麼是指令：官方指令叫v-on,v-model）

如下以element-ui中的select爲例：
在main.js同級別文件中添加directives.js:

// directives.js

import Vue from 'vue'

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()
      }
    })
  }
})

v-loadmore: 用於在element-ui的select下拉框加上滾動到底事件監聽
scrollHeight 獲取元素內容高度(只讀)
scrollTop 獲取或者設置元素的偏移值,經常使用於, 計算滾動條的位置, 當一個元素的容器沒有產生垂直方向的滾動條, 那它的scrollTop的值默認爲0.
clientHeight 讀取元素的可見高度(只讀)
若是元素滾動到底, 下面等式返回true, 沒有則返回false
scrollHeight - scrollTop === clientHeight

這裏運用到了滾動偏移來作監聽來處理，這與聊天對話框中默認下拉到底部的原理是大同小異的，後續我會有專門的文章進行講解。

// main.js

// 註冊滾動條加載觸發事件v-loadmore綁定
import directives from './directives'
Vue.use(directives)

而後在組件中使用

<!-- vue -->

<el-select
  v-model="chatmode"
  placeholder="聊天模式"
  size="mini"
  v-loadmore="loadMore">
  <el-option
    v-for="item in chatmodes"
    :key="item.value"
    :label="item.qa_name"
    :value="item.qa_code"
    :disabled="item.disabled">
  </el-option>
</el-select>

<script>
export default {
  methods: {
    loadMore () {
      // 這裏寫入要觸發的方法
    }
  }
}
</script>

本文並不是本人思路，但原做者的實現方法值得認同，在基礎上詳細說明使用方法 原文https://segmentfault.com/a/1190000014972548